JavaScript拖拽效果的原理及實現 JavaScript中實現拖拽效果需要用到 事件偵聽 和 滑鼠事件 。事件偵聽是對被拖拽的元素添加事件偵聽，包括mousedown,mousemove,mouseup。 常見的拖拽操作基本就是下麵的方式： 1、用滑鼠點擊選中被拖拽的元素 2、按住滑鼠不放，拖 ...
JavaScript拖拽效果的原理及實現
JavaScript中實現拖拽效果需要用到事件偵聽和滑鼠事件。事件偵聽是對被拖拽的元素添加事件偵聽，包括mousedown,mousemove,mouseup。
常見的拖拽操作基本就是下麵的方式：
1、用滑鼠點擊選中被拖拽的元素
2、按住滑鼠不放，拖動滑鼠
3、拖拽元素到一定位置，放開滑鼠實現拖拽的效果
在逆戰班的學習中一些情況下還需要用到mouseleave。這裡講述的案例是存在多個元素情況下的拖拽。
以下先展示拖拽效果，如下所示：
具體的代碼如下所示：
1.創建div元素並設置簡單的CSS樣式
<style>
div {
width: 50px;
height: 50px;
background-color: blue;
text-align: center;
position: absolute; /*設置的這些div預設重疊在頁面左上角*/
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
2.每一個div都需要有一個偵聽事件，才能實現所有的div都有拖拽效果。代碼如下
var divs = document.querySelectorAll("div"); //獲取div元素的偽數組集合
for (var i = 0; i < divs.length; i++) {
//利用for迴圈，給每個div添加一個滑鼠按下的事件，來觸發函數mouseHandler
divs[i].addEventListener("mousedown", mouseHandler);
}
3.函數mouseHandler的主體部分了，這裡我採用的是if，else if來寫。
function mouseHandler(e) {
//通過判斷事件的類型來執行對應的條件語句
if (e.type === "mousedown") {
e.preventDefault();
//這裡將e.target賦給document.div,相當於設了一個局部變數，在觸發mousemove事件後，
//再次進入函數時，保證觸發事件的div就是我們要改變位置的那個div
document.div = e.target;
//這裡也是將滑鼠相對拖拽的那個div元素
//左上角的位置，設置成一個對象進行保存其實相當於如下兩條
document.offset = { x: e.offsetX, y: e.offsetY };
//document.offsetx=e.offsetX;將e.offsetX賦值給自定義變數document.offsetx
//document.offsety=e.offsetY;將e.offsetY賦值給自定義變數document.offsety
//和上面是兩種寫法
//在滑鼠點擊後，如果發生滑鼠移動事件，則再次進入該函數進行執行滑鼠移動的執行語句
document.addEventListener("mousemove", mouseHandler);
//在滑鼠點擊後，如果發生滑鼠釋放事件，則再次進入該函數進行執行，則再次進入該函數進行執行滑鼠釋放的執行語句
document.addEventListener("mouseup", mouseHandler);
} else if (e.type === "mousemove") {
//判斷觸發的事件類型是mousemove之後執行
//這裡的document.div和document.offset.x都是之前定義好的變數，用e.clientX-document.offset.x
//是因為元素的position位置是相對元素的左上頂點的位置的，因此滑鼠所在的位置值不能直接賦給它。
document.div.style.left = e.clientX - document.offset.x + "px";
document.div.style.top = e.clientY - document.offset.y + "px";
} else if (e.type === "mouseup") {
//如果滑鼠釋放，則執行移除事件偵聽
document.removeEventListener("mousemove", mouseHandler);
document.removeEventListener("mouseup", mouseHandler);
}
}
