制作鼠标拖动图片效果
首先,先用HTML CSS制作样式
鼠标拖拽分为3个部分:
1.当鼠标在元素上方按下时,拖拽开始(onmousedown)
2.当鼠标移动时元素跟随鼠标移动,拖拽进行中(onmousemove)
3.当鼠标松开时,拖拽停止,元素固定在最后所在位置(onmouseup)
来到js部分,先获取元素
1.鼠标按下部分
计算鼠标与盒子左侧和上方的距离
左侧距离 = 鼠标水平坐标-盒子左侧偏移距离(offsetLeft)、
上方距离 = 鼠标垂直坐标-盒子上方偏移距离(offsetTop)
2.鼠标移动,盒子随着鼠标移动而移动
获取鼠标水平&垂直方向的坐标
设置盒子的left&top值,注意:要为元素加上定位
3、松开鼠标,盒子停止
取消鼠标移动事件
输出结果,便完成了制作鼠标拖动图片效果。