在掌握了前端开发的基础知识点HTML和CSS之后，接下来要学习的就是JS。JS即JavaScript，是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。那么如何使用JS实现图片拖拽效果呢?郑州HTML5培训老师给大家详细分析一下。

　　在此之前，我们需要了解一下JS的日常用途：嵌入动态文本于HTML页面;对浏览器事件做出响应;读写HTML元素;在数据被提交到服务器之前验证数据;检测访客的浏览器信息;控制cookies，包括创建和修改等;基于Node.js技术进行服务器端编程。

　　利用JS实现图片拖拽交换效果有三步：

　　1)鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop);

　　2)鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置;进行碰撞检测，同时计算被碰撞元素与目标元素中心点距离，将距离最小的定位交换元素;

　　3)鼠标释放onmouseup: 进行元素交换。

　　需要注意的是，排除没有碰撞成功的情况，进行特殊讨论;覆盖HTML5原有的图片拖拽功能，通过return false返回;交换时勿忘记交换图片的索引。在进行碰撞检测时，你可以进行逆向思维，检测未碰撞的情况，即判断目标元素是否超过碰撞元素的边界;计算元素中心位置时，可以改为计算元素左上角之间的距离，从而转变为计算。

　　如果你想利用JS实现图片旋转、放大或缩小，可以采用canvas画布这个来做的，核心点就在JS中去控制鼠标状态及事件。在引入JS的时候一定要注意，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容，因此JS要在最后引入。

　　想学习了解更多关于JS的知识点，你可以报名千锋郑州HTML5培训进行系统的学习。这里有专业的老师带你，手把手教你做项目，定期升级更新的课程大纲确保你能学到潮流的、企业所需的技术，还有更多免费的HTML5学习资料供你参考。

上一篇

千锋UI学员分享网页设计中如何确定屏幕的分辨率

下一篇

郑州大数据培训学员技术分享 如何理解ssm框架