鼠标可拖动的图片

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具：DW

关键技术：JavaScript

作者：晨疯

撰写时间：2021/06/08

 

1.先康康效果

   用鼠标将图1拖动到图2的位置上；

   图1

   图2

2.简单的html与css样式

   想让一个图片或者一个元素动起来，必须将它设置定位，让它脱离文档流；

3.

（1）获取到盒子的ID，给一个鼠标按下事件 onmousedown

（2）事件委派

（3）通过事件的委派获取被拖拽盒子的坐标

     Lx 为鼠标指针的水平坐标

     Ly 为鼠标指针的垂直坐标

（4）onmousemove 鼠标移动事件

     当鼠标移动时，盒子跟着移动

（5）onmouseup 鼠标松开事件

     当鼠标松开时，盒子停留在鼠标松开的位置上。