JS实现图片拖拽交换效果资源-CSDN文库

176 浏览量 2020-12-09 17:35:14 上传评论收藏 47KB PDF 举报

资源推荐

资源详情

资源评论

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

<div id="photo">

<ul>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

<li><img src="" alt=""></li>

</ul>

</div>

CSS

* {

margin:0;

padding: 0;

}

body {

user-select: none; /*阻止文本选中*/

}

#photo {

width: 600px;

height: 600px;

border: 2px solid #000;

margin: 20px auto;

}

#photo ul li {

list-style:none;

width: 180px;

height: 180px;

margin: 10px;

float: left;

}

#photo ul li:hover {

background: #c0c;

}

#photo ul li img {

width: 180px;

height: 180px;

border: 1px solid #ccc;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38740130

粉丝: 6
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip