2021-05-25

制作鼠标拖动图片效果

    首先，先用HTML CSS制作样式

鼠标拖拽分为3个部分：

1.当鼠标在元素上方按下时，拖拽开始(onmousedown)

2.当鼠标移动时元素跟随鼠标移动，拖拽进行中(onmousemove)

3.当鼠标松开时，拖拽停止，元素固定在最后所在位置(onmouseup)

来到js部分，先获取元素

1.鼠标按下部分

计算鼠标与盒子左侧和上方的距离

左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）、

上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）

2.鼠标移动，盒子随着鼠标移动而移动

获取鼠标水平&垂直方向的坐标

设置盒子的left&top值，注意：要为元素加上定位

3、松开鼠标，盒子停止

取消鼠标移动事件

输出结果，便完成了制作鼠标拖动图片效果。