需要提前了解的
- 運動都需要定位的支持宝冕，所以如果想實現(xiàn)拖拽，拖拽目標必須設置position為定位屬性柠逞。
- 事件源 拖拽需要用到事件源 mouseEvent
image.png
其中clientX clientY相對于瀏覽器窗口采转，offsetX offsetY相對于父元素孽查。
- 三個事件：onmousedown、onmousemove蒿秦、onmouseup
實現(xiàn)思路：
1：給目標元素添加onmousedown事件烤镐，拖拽的前提是在目標元素按下鼠標左鍵。
2：當onmousedown發(fā)生以后棍鳖，此刻給document添加onmousemove事件炮叶，意味著此刻鼠標在網(wǎng)頁的移動都將改變目標元素的位置。
3：在onmousemove事件中渡处，設定目標元素的left和top镜悉，公式：
目標元素的left = 鼠標的clientX – （鼠標和元素的橫坐標差，即offsetX）
目標元素的top = 鼠標的clientY– （鼠標和元素的縱坐標差医瘫，即offsetY）侣肄。
4：當onmousedown發(fā)生以后，此刻給document添加onmouseup事件醇份，意味著此刻鼠標在網(wǎng)頁的任意位置松開鼠標稼锅，都會放棄拖拽的效果叮喳。
5：在onmouseup事件中，取消document的onmousemove事件即可缰贝。
具體代碼
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (event1) {
// 鼠標按下的時候開始拖拽
//記錄鼠標 在div 中的偏移
var evt1 = window.event || event1;
var offsetY = evt1.pageY - div.offsetTop;
var offsetX = evt1.pageX - div.offsetLeft;
//監(jiān)聽鼠標在文檔中的移動
document.onmousemove = function (event) {
//改變 div 的坐標
//根據(jù)鼠標坐標計算出 div 的坐標
var evt = event || window.event;
console.log(evt.pageX,evt.pageY);
var divLeft = evt.pageX -offsetX;
var divTop = evt.pageY - offsetY;
var width = document.body.clientWidth || document.documentElement.clientWidth;
var height = document.body.clientHeight || document.documentElement.clientHeight;
//邊界處理
if(divTop >=0 && divTop <= height - div.offsetHeight){
div.style.top = divTop +'px';
}
if(divLeft >=0 && divLeft <= width - div.offsetWidth){
div.style.left = divLeft +'px';//px
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
