高手请进：关于jquery弹出层拖拽不灵敏我问题

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

mousemove 事件用 document.onmousemove
我觉得楼主你提供的代码是否完整，疑问一：你提供的代码的倒四行： parseInt(width)，这个width在你提供的代码上下文里并没有看到它的定义！
估计这个width指的是其他JS代码里定义过的，但在楼主已发代码里并没有看到！或者可能是笔误，如果把倒四行的判断去掉，拖拽就会立刻产生效果！这个我刚才已经测试过了！不灵敏问题倒没有发现！
我明白了，根据上下文里，如果把那个width定义为弹出层的宽度，那么代码即可正常！根据楼主的代码我自己测试修改了一下，完整的HTML如下：提供给高手们调试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>弹层测试</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
   var _move = false; //移动标记
    //鼠标离控件左上角的相对位置
    var moveX = 0;
    var moveY = 0;
    var moveTop = 0;
    var moveLeft = 0;
    var iWidth = $(window).width();
    var iHeight = $(window).height();
alert(iWidth+"#"+iHeight);
$(function(){
    $("#floatBox .title").mousedown(function(e) {
        _move = true;
        moveX = e.clientX;
        moveY = e.clientY;
        moveTop = parseInt($("#floatBox .title").css("top")); // 获取弹出框上边的位置
        moveLeft = parseInt($("#floatBox .title").css("left")); // 获取弹出框左边的位置    }).mouseup(function() {
        _move = false;
    }).mousemove(function(e) {
        if (_move) {
            var x = moveLeft + e.clientX - moveX; // 计算相对左边移动的操作＝当前弹出框左边的位置＋鼠标移动到的位置－鼠标按下的位置
            var y = moveTop + e.clientY - moveY; // 计算相对上边移动的操作＝当前弹出框上边的位置＋鼠标移动到的位置－鼠标按下的位置
            // 当鼠标有移动并且移动的位置在可视页面内，就执行操作
            if (x > 0 && (x + parseInt($("#floatBox .title").width()) < iWidth) && y > 0 && (y + parseInt($("#floatBox .title").height()) < iHeight)) {
                $("#floatBox .title").css({ top: y, left: x }); //控件新位置
            }
        }    });
});
</script>
</head>
<body>
<div id="floatBox">
   <div class="title" style="position:absolute;top:100px;left:200px;background:red;width:200px;height:200px;">test</div>
</div>
</body>
</html>
用js的onmousedown、onmouseup、onmousemove来实现就这个样，毕竟不是专门干这个的
re：3楼
我所提供的代码仅是实现拖拽效果的，width和height是调用函数时传的参数代表弹出层的宽高。
弹出层里面是一个iframe指向另外一个页面，另外的页面在加载的时候会访问数据库并绑定一些数据，而非简单的写几个字弹出来。初步认为是iframe里面内容过多而引起弹出层拖拽不灵敏。
跪求解决办法！！！！！！！！！！！！！！！！！！！！！！！！！
如果是内容多引起的拖拽卡
解决办法很简单在判定drag事件开始时隐藏拖动的div中的内容
<div id="parent"></div>
<input id="btn" type="button" value="生成一个div">
<script>
var dragdiv = function(){
var drag = this;
this.args = arguments;
this.mouse_status = 0;
this.W = 0;
this.H = 0;
this.zi = 2;
this.colarr = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F');
this.obj = function(id){return document.getElementById(id);}
this.btn = this.obj(arguments[0]); this.btn.onclick = function(){
drag.create();
} this.create = function(){
var div = document.createElement("div");
var did = "div" + Date.parse(new Date()) + parseInt(Math.random() * 1000);
var y = 0, x = 0;
if(drag.args[4] && drag.args[5]){
x = drag.args[4];
y = drag.args[5];
}else{
x = parseInt(Math.random() * ((screen.availWidth * 0.7)-(screen.availWidth * 0.1) + 1) + screen.availWidth * 0.1);
y = parseInt(Math.random() * ((screen.availHeight * 0.5)-(screen.availHeight * 0.1) + 1) + screen.availHeight * 0.1);
}
var width = drag.args[2]? drag.args[2]: 300;
var height = drag.args[3]? drag.args[3]: 200;
var border_color = drag.args[7]? drag.args[7]: drag.color(null, 1);
div.id = did;
div.style.cssText = "width:" + width + "px;height:" + height + "px;border:0.2cm " + border_color + " solid;cursor: pointer;position:absolute;top:" + y + "px;left:" + x + "px;z-index:" + (++drag.zi) + ";filter:alpha(opacity=100);opacity:1;";
div.onmousedown = function(event){drag.mousedown(this, event, 1);}
div.onmouseup = div.onmouseout = function(event){drag.setp(this, event, 0);}
div.onmousemove = function(event){drag.move(this, event);}
drag.obj(drag.args[1]).appendChild(div);
if(drag.args[6])div.style.background = drag.args[6];
else drag.color(did, 0);
} this.color = function(){
var color = "#";
for(var i = 0; i < 6; i++){
var x = parseInt(Math.random() * 16);
color += drag.colarr[x];
}
if(arguments[1])return color;
else drag.obj(arguments[0]).style.background = color;
} this.setp = function(){
var e = arguments[1] || window.event;
drag.mouse_status = arguments[2];
drag.W = e.clientX - parseInt(arguments[0].style.left);
drag.H = e.clientY - parseInt(arguments[0].style.top);
if(document.all)arguments[0].filters.alpha.opacity = 100;
else arguments[0].style.opacity = "1";
} this.mousedown = function(){
var e = arguments[1] || window.event;
drag.mouse_status = arguments[2];
drag.W = e.clientX - parseInt(arguments[0].style.left);
drag.H = e.clientY - parseInt(arguments[0].style.top);
if(document.all)arguments[0].filters.alpha.opacity = 50;
else arguments[0].style.opacity = "0.5";
arguments[0].style.zIndex = ++drag.zi;
} this.move = function(){
var e = arguments[1] || window.event;
window.getSelection && window.getSelection().removeAllRanges();
if(drag.mouse_status){
arguments[0].style.top = e.clientY - drag.H + "px";
arguments[0].style.left = e.clientX - drag.W + "px";
}
} window.onerror = function(msg, url, l){
var show = "";
if(document.all)show = msg + "在" + url + "中的第" + l + "行";
else show = msg + " at " + url + " line " + l;
alert(show);
return true;
}

return this;
}//new dragdiv(按钮id, 包含标签id[, 宽, 高, x坐标, y坐标, 背景颜色, 边框颜色]);
//new dragdiv("btn", "parent", 150, 120, 200, 400, "#CCFFFF", "#00FF33");
new dragdiv("btn", "parent");
</script>