怎么设置一个小方块随着鼠标移动而移动

思考：怎么让小方块移动？：改变小方块的坐标

那我们需要哪些坐标才能确定小方块的坐标呢？

• 鼠标的坐标：e.clientXM,e.clientY
• 小方块相对父元素的坐标 这里涉及到比较多的坐标问题，我们来看一张图：

我们需要计算的坐标是那部分呢？

我们需要计算的就是div的top和left：其实就相当于上上面图的offsetX,offsetY 那我们需要计算出父元素距可视区域的偏移量

代码：

// 拖拽
        drag(e) {
            let odiv = e.target;    //获取目标元素
            //父元素相对可视区域的偏移量
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{    //鼠标按下并移动的事件
                //用鼠标的位置减去偏移量，得到元素相对父元素的位置
                let left = e.clientX - disX;  
                let top = e.clientY - disY;
                
                //绑定元素位置到positionX和positionY上面
                this.positionX = top;
                this.positionY = left;
                
                //移动当前元素
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },

注意：在鼠标事件中，有三种状态：mousedown,mousemove,mouseup

第二种方式：使用h5的drag api

首先来了解一下有哪些api,以及它们的触发时机：

1. dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
2. darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
3. dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
4. dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
5. dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
6. drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
7. dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

嗯，思路跟上面的一样 代码实现：

	// 拖拽小狗图片的事件
		dogMove(e) {
			let dog = document.getElementById('dragDog');
			this.dogX = e.clientY - e.target.offsetLeft;
			this.dogY = e.clientY - e.target.offsetTop;
			document.ondragend = (e) => {
				let left = e.clientX - this.dogX;
				let right = e.clientY - this.dogY;
				dog.style.left = `${left}px`;
				dog.style.top = `${right}px`;
			};
			document.ondrop = (e) => {
				console.log('结束');
				document.ondrag = null;
				document.ondrop = null;
			};
		},