JS实现图片拖拽交换效果-创新互联

JS实现图片拖拽交换效果，供大家参考，具体内容如下

听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。

实现要点

• 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop)；
• 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置；进行碰撞检测，同时计算被碰撞元素与目标元素中心点距离，将距离最小的定位交换元素；
• 鼠标释放onmouseup: 进行元素交换
  

注意点

• 排除没有碰撞成功的情况，进行特殊讨论；
• 覆盖html5原有的图片拖拽功能，通过return false返回；
• 交换时同时勿忘记交换图片的索引；
  

小技巧

• 进行碰撞检测时，可以进行逆向思维，检测未碰撞的情况，即判断目标元素是否超过碰撞元素的边界(如：目标元素的右侧是否超过被碰撞元素的左侧)
• 计算元素中心位置时，可以改为计算元素左上角之间的距离，从而转变为计算(offsetLeft1,offsetTop1)(offsetLeft1,offsetTop1)与(offsetLefti(offsetLefti, offsetTopi)offsetTopi)的距离,以简化计算；
  

实现

HTML