在ff下第一次拖放没问题,但是第二次却拖不鸟(鼠标不离开元素,mousemove事件下元素也可以动),在 ie6、7、8 chrome,opera 下效果正常。
代码如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Test</title>
<style type="text/css"><!--
.a {
position:absolute;
left:100px; top:100px;
width:100px; height:115px; background:#eee;
cursor:move;
}
--></style>
</head>
<body>
<div id="a" class="a"></div>

<script type="text/javascript">//<![CDATA[
var _IsMousedown = 0;
document.getElementById('a').onmousedown = function(e){
_IsMousedown = 1;
var cx = offsetX(e) , cy = offsetY(e);
this.onmousemove = function(e){
if(_IsMousedown == 0){
return false;
}
var x = getX(e) , y = getY(e);
this.style.left = x - cx + 'px';
this.style.top = y - cy + 'px';
}
this.onmouseup = this.onmouseout = function(){
_IsMousedown = 0;
}
}
function offsetX( e ){
e = e || window.event;
return e.layerX || e.offsetX;
}
function offsetY( e ){
e = e || window.event;
return e.layerY || e.offsetY;
}
function getX( e ){
e = e || window.event;
return e.pageX || e.clientX;
}
function  getY( e ){
e = e || window.event;
return e.pageY || e.clientY;
}
//]]></script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
            <title>Test</title>
            <style type="text/css"><!--
                .a {
                    position:absolute;
                    left:100px; top:100px;
                    width:100px; height:115px; background:#eee;
                    cursor:move;
                }
            --></style>
        </head>
        <body>
            <div id="a" class="a"></div>
            
            <script type="text/javascript">//<![CDATA[
                //var _IsMousedown = 0;
                document.getElementById('a').onmousedown = function(e){
                   // _IsMousedown = 1;
                    var cx = offsetX(e) , cy = offsetY(e);
                    this.onmousemove = function(e){
    //                    if(_IsMousedown == 0){
    //                        return false;
    //                    }
                        var x = getX(e) , y = getY(e);
                        this.style.left = x - cx + 'px';
                        this.style.top = y - cy + 'px';
                        return false;
                    }
                    this.onmouseup = this.onmouseout = function(){
                        //_IsMousedown = 0;
                        this.onmousemove = null;
                        return false;
                    }
                    return false;
                }
                function offsetX( e ){
                    e = e || window.event;
                    return e.layerX || e.offsetX;
                }
                function offsetY( e ){
                    e = e || window.event;
                    return e.layerY || e.offsetY;
                }            
                function getX( e ){
                    e = e || window.event;
                    return e.pageX || e.clientX;
                }
                function  getY( e ){
                    e = e || window.event;
                    return e.pageY || e.clientY;
                }
            //]]></script>
        </body>
    </html>
      

  2.   

    拖放  跨出浏览器后加setCapture/captureEvents
    http://chy2z.blog.163.com/blog/static/31668846200710253058200/