需要提前了解的
- 运动都需要定位的支持，所以如果想实现拖拽，拖拽目标必须设置position为定位属性。
- 事件源 拖拽需要用到事件源 mouseEvent
image.png
其中clientX clientY相对于浏览器窗口，offsetX offsetY相对于父元素。
- 三个事件：onmousedown、onmousemove、onmouseup
实现思路：
1：给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键。
2：当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置。
3：在onmousemove事件中，设定目标元素的left和top，公式：
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）。
4：当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果。
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;
//监听鼠标在文档中的移动
document.onmousemove = function (event) {
//改变 div 的坐标
//根据鼠标坐标计算出 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;
}
}
