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

网页名称：JS实现图片拖拽交换效果-创新互联
标题来源：http://dzwzjz.com/article/dieihi.html