js兼容拖动功能实现

来源：互联网发布：雪梨家淘宝店铺编辑：程序博客网时间：2024/04/30 06:12

    <div style="width:10px; height:10px; background:#fff; position:absolute;"><span id="test">kdkkdkdkd</span> </div>
<script type="text/javascript">
/*
* 拖动功能
* 调用形态绑定移动事件对象.onmousedown=function(e){dragMe(e, 设置了绝对定位的要移动的对象);}
*/

var dragMe = (function(){
    var mo, x, y;
    var mv = 'mousemove';
    var uv = 'mouseup';

    if (document.detachEvent) {/*ie*/
        var EA = document.attachEvent;
        var ER = document.detachEvent;
        mv = 'on' + mv;
        uv = 'on' + uv;
    } else {
        var EA = document.addEventListener;
        var ER = document.removeEventListener;
    }

    function moving(e) {
        om.style.left = (e.screenX - x) + 'px';
        om.style.top = (e.screenY - y) + 'px';
    }

    function end(e) {
        ER(mv, moving, false);
        ER(uv,arguments.callee,false);
        document.body.focus();//ff 3.0
    }

    return function(e, m) {
        e = e || event;
        e.cancelBubble = true;
        om = m;
        x = e.screenX - om.offsetLeft;
        y = e.screenY - om.offsetTop;
        EA(mv, moving, false);
        EA(uv, end, false);
    }
})();



document.getElementById('test').onmousedown=function(e){dragMe(e, this.parentNode);}
</script>