【基础问题】鼠标拖动div时，拖快了div就会粘在鼠标上，怎么解决这个问题

<!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" >
<head>
<title>wujinjian</title>
<script type="text/javascript">
var isDown=false;
var mDivX=0;
var mDivY=0;
var divobj; function mouseDown(e)
{
isDown=true;

mDivX=e.clientX-divobj.style.left.replace("px","");
mDivY=e.clientY-divobj.style.top.replace("px","");
} function mouseMove(e)
{
if(e==null)
e=window.event; if(isDown)
{
divobj.style.left=e.clientX-mDivX+"px";
divobj.style.top=e.clientY-mDivY+"px";
}
} function mouseUp()
{
isDown=false;
mDivX=0;
    mDivY=0;
} window.onload=function()
{
divobj=document.getElementById("divid"); document.onmousemove=mouseMove; document.onmouseup=mouseUp;
};
</script>
</head>
<body>
<div id="divid" style="position:absolute;left:10px;top:80px;width:400px;height:400px;background-color:gray;padding-top:50px;overflow:hidden;" onmousedown="mouseDown(event)">
<iframe src="http://news.baidu.com/" width="400" height="400"></iframe>
</div>
</body>
</html>这是一个拖动div的效果，有时候拖得快了，div就会粘在鼠标上，怎么解决这个问题？
不知道大家有没有碰到过？

解决方案 »

  1.   


    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>D类</title>
    <style type="text/css">
    html, body {
        margin:0;
    }
    </style>
    <script type="text/javascript">
    /Firefox/.test(navigator.userAgent) && function () {
        window.__defineGetter__('event', function () {
        //兼容Event对象
            var o = arguments.callee;
            do {
                if (o.arguments[0] instanceof Event) return o.arguments[0];
            } while (o = o.caller);
            return null;
        });
        
        window.attachEvent = Document.prototype.attachEvent = Element.prototype.attachEvent = function (type, listener, capture) {
        //兼容attachEvent方法
            return this.addEventListener(new String(type).substr(2), listener, capture || false);
        };
        
        window.detachEvent = Document.prototype.detachEvent = Element.prototype.detachEvent = function (type, listener, capture) {
        //兼容detachEvent方法
            return this.removeEventListener(new String(type).substr(2), listener, capture || false);
        };
        
    }();var D = {
    //拽补助类
        lock : false
        
        , dom : function () {
        //document相关属性
            return {
                left : document.documentElement.scrollLeft
                , top : document.documentElement.scrollTop
                , width : document.documentElement.clientWidth
                , height : document.documentElement.clientHeight
                , body : document.documentElement
            };
        }    , mos : function (e) {
        //获取鼠标绝对位置
            var dom = this.dom();
            
            return { 'x' : dom.left + e.clientX, 'y' : dom.top + e.clientY }
        }
        
        , pos : function (o) {
        //获取元素绝对位置
            var x = 0, y = 0;
            do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
            return { 'x' : x, 'y' : y };
        }
        
        , start : function (element, startEventHandler, moveEventHandler, stopEventHandler) {
        //移动开始
            if (this.lock) return;
            else this.lock = true; //先上锁安全:D
        
            var pos = this.pos(element) //元素位置
                , mos = this.mos(window.event) //鼠标位置
                , eventHandlers = { MF : null, EF : null } //事件记录
                , property = { x : mos.x - pos.x, y : mos.y - pos.y } //属性
                , _MF = this.move(moveEventHandler, property) //移动过程事件闭包
                , _EF = this.stop(element, stopEventHandler, eventHandlers); //移动停止事件闭包
            
            document.attachEvent('onmousemove', _MF); //鼠标移动
            document.attachEvent('onmouseup', _EF); //鼠标释放
            
            element.setCapture
                ? (element.setCapture(), element.attachEvent('onlosecapture', _EF))
                : window.attachEvent('onblur', _EF); //鼠标捕获丢失则释放
            
            eventHandlers.MF = _MF, eventHandlers.EF = _EF;
            
            startEventHandler && startEventHandler(property);
        }
        
        , move : function (moveEventHandler, property) {
        //移动中
            var wc = this;
            
            return function (e) {
                var mos = wc.mos(e || window.event), dom = wc.dom();
                window.getSelection && window.getSelection().removeAllRanges();
                
                /MSIE/.test(navigator.userAgent) && function () {
                //IE滚屏
                    if (mos.x > dom.left + dom.width) dom.body.scrollLeft = mos.x - dom.width;
                    else if (mos.x < dom.left) dom.body.scrollLeft = mos.x;                if (mos.y > dom.top + dom.height) dom.body.scrollTop = mos.y - dom.height;
                    else if (mos.y < dom.top) dom.body.scrollTop = mos.y;
                }();
                
                moveEventHandler && moveEventHandler({ x : mos.x - property.x, y : mos.y - property.y });
            };
        }
        
        , stop : function (element, stopEventHandler, eventHandlers) {
        //移动结束
            var wc = this;
            return function (e) {
                document.detachEvent('onmousemove', eventHandlers.MF);
                document.detachEvent('onmouseup', eventHandlers.EF);
                element.setCapture
                    ? (element.detachEvent('onlosecapture', eventHandlers.EF), element.releaseCapture())
                    : window.detachEvent('onblur', eventHandlers.EF);
                wc.lock = false; //事件都干掉了可以放心解锁了
    stopEventHandler && stopEventHandler();
            };
        }
        
    };
    </script>
    </head>
    <body>
    <div style="position:relative; width:100px; height:100px; background-color:#000000;">
        <div style="position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0 -10px; background-color:#F00; text-align:center; cursor:move;"
            onmousedown="var wc = this,pos;D.start(wc, null, function (property) {
                var node = wc.parentNode;
                pos = property;
                var a = D.pos(node), b = D.pos(wc);
                node.style.left = pos.x = property.x - b.x + a.x + 'px';
                node.style.top = pos.y = property.y - b.y + a.y + 'px';
            }, function () {
             alert('x:' + pos.x + '\ny:' + pos.y)
            });"
        >拽</div>
    </div><div style="width:50px; height:50px; line-height:50px; text-align:center; background-color:#F00; position:absolute; cursor:move;"
        onmousedown="var wc = this,pos;D.start(wc, null, function (property) {
         pos = property;
            wc.style.left = property.x + 'px';
            wc.style.top = property.y + 'px';
        }, function () {
         alert('x:' + pos.x + '\ny:' + pos.y)
        });"
    >拽</div>
    <div style="height:1000px;"></div>
    </body>
    </html>
     小苜以前给的代码，   恩。。 我拿出来骗分
     希望对LZ有帮助
      

  2.   

    因为iframe的原因
    在iframe上松掉鼠标  捕获不到document.onmouseup
    你可以把iframe去掉测试一下   在怎么快也不会丢失在iframe上面套一个透明的遮罩层就行了
    mouseDown显示出来
    mouseUp隐藏就行了
      

  3.   


    在ie上可以。在火狐上不行，在火狐上拖动中的iframe遮不住，鼠标照样能点击到iframe中的超连接
      

  4.   


    可以在拖动时吧iframe隐藏掉，鼠标松开时显示就行了