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);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/49930.html
標籤：Html/Css