JS拖拽效果的原理及實現

大家好，今天來給大家講解一下JS中拖拽效果的原理及實現。

首先我們先看一下拖拽效果的代碼以及實現效果

 

是不是很神奇呢？

接下來我們來拆分理解一下代碼

style部分我們就不詳說了，但是一定要記得給div加position定位！！！！！！

首先我們寫一下這個例子的實施思路：

       拖拽div，我們要按下鼠標點盒子，

然后盒子被鼠標移動

最后鼠標左鍵放開盒子停止被移動

就這簡簡單單的三個步驟

我們來看一下JS代碼：

var div=document.querySelector("div");

這里就是獲取div元素

①   div.onmousedown=function(e1){

②   document.onmousemove=function(e){

                div.style.left=e.clientX-e1.offsetX+"px";

                div.style.top=e.clientY-e1.offsetY+"px";

            }

③   document.onmouseup=function(){

                document.onmousemove=null;

                document.onmouseup=null;

            }

        }

這里的①②③部分就是我們所說的三個步驟

①    我們要想移動div就必須先按下左鍵然后才移動，所以②③部分就是包含在①步驟之內的，

②    定義鼠標移動函數：div的左邊/頂邊等於鼠標移動是的視口X / Y的距離減去相對於帶有定位的父盒子的X / Y坐標，如果只設置視口X / Y的坐標它就只會在div的左上角移動，設置了offsetX/Y之后就會點哪里就在哪里移動

③    定義鼠標放開后在文檔內的函數，這時候鼠標移動函數和它自身的函數就要取消。

到這里我們的拖拽事件就完成啦，是不是很簡單呢？快去動手實踐一下吧！