JS拖拽效果总结

js拖拽步骤

1：按下鼠标，即onmousedown

2: 移动鼠标，即onmousemove

3：松开鼠标，即onmouseup

 

原理：

先获取按下时，鼠标距离元素的左边距：通过按下时的disX = ev.clientX-obj.offsetLeft获取到,Y轴同理，disY = ev.clientX-obj.offsetTop

移动时，元素的左边距即等于鼠标的坐标减去对应的disX和disY

鼠标松开时，清除移动时的函数即可

 

常见问题：

1.鼠标移除元素，既不能继续移动，通过将obj.onmousemove改为document.onmousemove,同时修改onmouseup来解决

2.当有文字被选中或者拖动的是图片时，无法正常拖动，在标准浏览器下通过return false可以得到解决，非标准的情况下通过给拖拽元素添加全局监听obj.setCapture()来解决。

 

案例：

常见的拖拽以及磁性悬浮效果

 

代码演示

/*
拖拽函数
*/
function drag(obj){

            obj.onmousedown = function(ev){

            var ev = ev||event;


            //计算出按下时，鼠标离div的距离
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            if(obj.setCapture){
                obj.setCapture();
            }


            document.onmousemove = function(ev){

                var ev = ev||event;

                //计算出当前距离左边的距离
                var L = ev.clientX - disX;
                //计算出当前距离顶部的距离
                var T = ev.clientY - disY;

                //判断是否超出可视区

                //磁性悬浮效果只需将L<0改为L<100（可变）即可
                if(L<0){
                    L = 0;
                }else if(L>document.documentElement.clientWidth - obj.offsetWidth){
                    L = document.documentElement.clientWidth - obj.offsetWidth;
                }else if(T<0){
                    T = 0;
                }else if(T>document.documentElement.clientHeight - obj.offsetHeight){
                    T = document.documentElement.clientHeight - obj.offsetHeight;
                }


                obj.style.left = L + 'px';
                obj.style.top =  T + 'px';
                


            }

            obj.onmouseup = function(){
                
                document.onmousemove = obj.onmouseup = null;

                if(obj.relaseCapture){
                    obj.relaseCapture();
                }

                
            }

            return false;

        }