復制代碼 代碼如下:
/*
拖拽流程：
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; // 清空鼠標彈起事件
}
};