原生js拖曳(第一課 未相容)拖曳思路_javascript技巧

複製程式碼 程式碼如下:

/*
拖曳流程：
1、第一個一步點擊需要拖曳的元素
2、在點擊下的元素被選中，進行move移動
3、當滑鼠彈起的時候，停止動作
4、點擊元素oDIV的時候，可用的是oDIV區域，而move和up則是全域區域，也就是整個文檔通用，即應該用document
*/
oDIV = document.getElementById("gaga");
oDIV.onmousedown = function( e ){ // 當滑鼠點選下去的時候
var diffX = e.clientX - oDIV.offsetLeft; // 點選的位置距離瀏覽器最左邊的位置(clientX) 再減去被點選元素距離最左邊的位置(oDIV.offetLeft) 在引動的所點擊的元素距離最左邊的位置是不確定的所以需要這個結果
var diffY = e.clientY - oDIV.offsetTop; // 點擊的位置距離瀏覽器頂部的位置(clientY) 再減去被點擊元素距離頂部的位置(oDIV.offsetTop) 在引動的所點擊的元素距離頂部的位置是不確定的所以需要這個結果
document.onmousemove = function( e ){ // 當按下滑鼠不放的時候
var e = e || window.event;
oDIV.style.top = e.clientY - diffY "px";
oDIV.style. left = e.clientX - diffX "px";
};
document.onmouseup = function(){ // 當滑鼠彈起的時候
document.onmousemove = null; // 清空滑鼠按下老鼠不放的事件
document.onmouseup = null; // 清空老鼠彈起事件
}
};