js 原生_拖动页面元素,松开释放

嗯哼。不多说,直接上代码了。

  • // 为元素 绑定拖动事件
    function bindDragEvent(obj){
        obj.onmousedown = function(e){
            e = e || window.event;
            
            obj.setCapture && obj.setCapture();    // IE8 及以下 强制捕获下一次单击事件
            
            obj.fixedX = e.clientX - (obj.getBoundingClientRect().left - document.documentElement.clientLeft);
            obj.fixedY = e.clientY - (obj.getBoundingClientRect().top - document.documentElement.clientTop);
            
            document.onmousemove = function(e){
                e = e || window.event;
                
                var x = e.clientX + (document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft);
                var y = e.clientY + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop);
                
                obj.style.left = x - obj.fixedX + "px";    // 元素在页面中的坐标 = 鼠标在页面中的坐标 - 元素在页面中的坐标
                obj.style.top = y - obj.fixedY + "px";
            };
            
            document.onmouseup = function(){
                document.onmousemove = null;    // 解除 鼠标移动div跟随 事件
                document.onmouseup = null;    // 解除鼠标松开事件
                obj.releaseCapture && obj.releaseCapture();    // IE8 及以下 解除强制捕获单击事件
            };
            
            return false;
        };
    }

     

posted @ 2018-10-29 22:55  耶梦加德  阅读(1042)  评论(0编辑  收藏  举报