码迷,mamicode.com
首页 > 其他好文 > 详细

拖动页面元素,松开释放

时间:2018-10-29 23:32:30      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:col   span   scroll   fun   get   func   nbsp   tcap   鼠标   

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

  • // 为元素 绑定拖动事件
    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;
        };
    }

     

拖动页面元素,松开释放

标签:col   span   scroll   fun   get   func   nbsp   tcap   鼠标   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!