文章目錄
- 問題：
-
- 問題分析：
- 需要了解（重點）：
- 解決方案:
-
- 代碼：
- 思考：
-
-
- 方向：
-
問題：
在html中建立多個元素，要求能用滑鼠點下進行平移，松開固定位置。類似于電腦桌面圖示的平移。
問題分析：
首先，類比于電腦桌面的圖示拖拽平移，滑鼠按下時進入事件，記錄滑鼠相對元素位置，然後滑鼠移動，動态改變元素定位，最後滑鼠松開，位置不再改變。
用到綁定的事件有：onmousedown,onmousemove,onmouseup。
值得注意的是：分别對哪個元素綁定相應的事件。
- 滑鼠按下，應該是在元素中按下，這個onmousedown綁定于元素上。
- 滑鼠移動，是在整個界面中移動，故綁定在document上。
- 滑鼠放開，也是在整個頁面中放開，綁定在document上。
需要了解（重點）：
在事件觸發時，每個觸發事件“都”會傳入一個對象（關于滑鼠位置，點選按鈕等并且這個對象隻有IE8及以下的浏覽器不支援），隻需要在綁定事件時寫入形參，便可調用該對象的屬性。值得一提的是，在獲得滑鼠定位時，便是采用此方法。
解決方案:
擷取滑鼠定位，動态改變元素定位。
代碼：
//js代碼：
window.onload = function() {
var box1 = document.getElementById('box1');
//下面寫移動函數。
function move(ele) {
ele.onmousedown = function(e) {
e= e||window.e;//解決IE8不傳參問題，IE8的不傳隻是将對象傳到window中。
//擷取滑鼠相對元素位置
var a = e.clientX - ele.offsetLeft;
var b = e.clientY - ele.offsetTop;
document.onmousemove = function(e) {
e = e||window.e;
//最終位置為：滑鼠位置 - 滑鼠相對元素位置。
ele.style.left = e.clientX - a +'px';
ele.style.top = e.clientY -b + 'px';
}；
document.onmouseup = function() {
//在滑鼠松開後，及時停止事件。
document.onmousemove = null;
document.onmouseup = null;
}；
return false；//取消全選重影事件。對IE8時要用 setCapture（） 和 releaseCapture（）。
}；
}
move(box1);//此時id為box1 的元素便可移動
//以下是為class添加事件：
var box = document.getElementsByClassName('box');
for(var i=0;i<box.length;i++) {
move(box[i]);
}
}
<body>
<div id="box1"></div>
<div class="box"></div>
<div class="box"></div>
</body>
* {
padding: 0px;
margin: 0px;
}
div {
width: 100px;
height: 100px;
}
.box,#box1 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*！！！一定要開啟定位。*/
}
思考：
在設計完拖拽後，如何實作點選按鈕，産生元素，并同樣具有可移動事件？
方向：
建立新節點，添加節點，為節點添加屬性。為新加節點調用拖拽函數。
感謝大家的閱讀，歡迎批評指正！
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)