求一个可拖DIV的类，最后兼容FF

jQuery
http://plugins.jquery.com/project/Plugins/category/45
本来已经捕获鼠标,就不用处理丢失了,可是我发现,当拖拽过程中，如果你按clt + tab后,切换另一个东西出来,比如说QQ窗口,这样就会丢失鼠标捕获...所以还是加了处理..
[code]
<!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>Drag</title>
<script type="text/javascript">
var rePos = function () {
    return document.documentElement.getBoundingClientRect && function (o) {
        var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
        return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
    } || function (o) {
        var x = 0, y = 0;
        do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
        return { 'x' : x, 'y' : y };
    };
}();var Drag = {

    x : 0, y : 0, o : null, moveF : null, endF : null

    , start : function (o) {

        if (this.moveF) return;

        var pos = rePos(o), e = window.event || arguments.callee.caller.arguments[0], me = this;

        this.o = o, this.x = document.documentElement.scrollLeft + e.clientX - pos.x, this.y = document.documentElement.scrollTop + e.clientY - pos.y;
        o.setCapture && o.setCapture();

        if (document.attachEvent) {
            document.attachEvent('onmousemove', this.moveF = function (e) { me.move(e); });
            document.attachEvent('onmouseup', this.endF = function () { me.end(); });
        } else if (document.addEventListener) {
            document.addEventListener('mousemove', this.moveF = function (e) { me.move(e); }, false);
            document.addEventListener('mouseup', this.endF = function () { me.end(); }, false);
        }
    }

    , move : function (e) {
        window.getSelection && window.getSelection().removeAllRanges();
        with (this.o.style) {
            left = document.documentElement.scrollLeft + e.clientX - this.x + 'px';
            top = document.documentElement.scrollTop + e.clientY - this.y + 'px';
        }
    }

    , end : function () {
        this.o.setCapture && this.o.releaseCapture();
        if (document.attachEvent) {
            document.detachEvent('onmousemove', this.moveF);
            document.detachEvent('onmouseup', this.endF);
        } else if (document.addEventListener) {
            document.removeEventListener('mousemove', this.moveF, false);
            document.removeEventListener('mouseup', this.endF, false);
        }
        this.o = this.moveF = this.endF = null;
    }

};
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:#FF0000;position:absolute;" onmousedown="Drag.start(this)">第一个</div>
<div style="width:100px;height:100px;background-color:#00FF00;position:absolute;" onmousedown="Drag.start(this)">第二个</div>
<div style="width:100px;height:100px;background-color:#0000FF;position:absolute;" onmousedown="Drag.start(this)">第三个</div>
<center>字有好多</center>
</body>
</html>
[/code]
晕了,加错了标记直接把代码都没显示寒.
<!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>Drag</title>
<script type="text/javascript">
var rePos = function () {
    return document.documentElement.getBoundingClientRect && function (o) {
        var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
        return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
    } || function (o) {
        var x = 0, y = 0;
        do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
        return { 'x' : x, 'y' : y };
    };
}();var Drag = {

    x : 0, y : 0, o : null, moveF : null, endF : null

    , start : function (o) {

        if (this.moveF) return;

        var pos = rePos(o), e = window.event || arguments.callee.caller.arguments[0], me = this;

        this.o = o, this.x = document.documentElement.scrollLeft + e.clientX - pos.x, this.y = document.documentElement.scrollTop + e.clientY - pos.y;
        o.setCapture && o.setCapture();

        if (document.attachEvent) {
            document.attachEvent('onmousemove', this.moveF = function (e) { me.move(e); });
            document.attachEvent('onmouseup', this.endF = function () { me.end(); });
        } else if (document.addEventListener) {
            document.addEventListener('mousemove', this.moveF = function (e) { me.move(e); }, false);
            document.addEventListener('mouseup', this.endF = function () { me.end(); }, false);
        }
    }

    , move : function (e) {
        window.getSelection && window.getSelection().removeAllRanges();
        with (this.o.style) {
            left = document.documentElement.scrollLeft + e.clientX - this.x + 'px';
            top = document.documentElement.scrollTop + e.clientY - this.y + 'px';
        }
    }

    , end : function () {
        this.o.setCapture && this.o.releaseCapture();
        if (document.attachEvent) {
            document.detachEvent('onmousemove', this.moveF);
            document.detachEvent('onmouseup', this.endF);
        } else if (document.addEventListener) {
            document.removeEventListener('mousemove', this.moveF, false);
            document.removeEventListener('mouseup', this.endF, false);
        }
        this.o = this.moveF = this.endF = null;
    }

};
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:#FF0000;position:absolute;" onmousedown="Drag.start(this)">第一个</div>
<div style="width:100px;height:100px;background-color:#00FF00;position:absolute;" onmousedown="Drag.start(this)">第二个</div>
<div style="width:100px;height:100px;background-color:#0000FF;position:absolute;" onmousedown="Drag.start(this)">第三个</div>
<center>字有好多</center>
</body>
</html>

调试易

求一个可拖DIV的类，最后兼容FF

解决方案 »