前端开发攻略---轻松实现排序功能：利用JavaScript创建直观的拖拽排序体验

拖拽事件主要包括以下几种：

dragstart（拖拽开始）：当用户开始拖拽一个元素时触发，通常在被拖拽的元素上绑定此事件。在该事件的处理函数中，可以设置被拖拽元素的一些属性或数据。

drag（拖拽移动）：在拖拽过程中，随着鼠标或触摸屏的移动持续触发，通常在被拖拽元素上绑定此事件。在该事件的处理函数中，可以根据鼠标或触摸屏的位置更新被拖拽元素的状态。

dragenter（进入拖拽目标区域）：当一个可拖拽的元素进入一个拖拽目标区域时触发，通常在拖拽目标元素上绑定此事件。在该事件的处理函数中，可以为拖拽目标元素添加一些视觉效果，以提示用户可以释放拖拽元素。

dragover（在拖拽目标区域中移动）：当一个可拖拽的元素在一个拖拽目标区域中移动时持续触发，通常在拖拽目标元素上绑定此事件。在该事件的处理函数中，一般需要阻止默认的事件行为，以允许拖拽元素释放到该区域。

dragleave（离开拖拽目标区域）：当一个可拖拽的元素离开一个拖拽目标区域时触发，通常在拖拽目标元素上绑定此事件。在该事件的处理函数中，可以移除之前添加的视觉效果。

drop（释放拖拽元素）：当用户释放鼠标或触摸屏时，在拖拽目标区域内触发此事件。通常在拖拽目标元素上绑定此事件。在该事件的处理函数中，可以处理释放拖拽元素后的相关操作，如更新页面内容或重新排列元素顺序。

这些事件可以结合使用，以实现各种拖拽交互功能，例如拖拽排序、拖拽放置等。

1、演示

2、问题

1、怎样让元素变得可拖拽

给元素加上 draggable 属性，值为 true 即可
 <div draggable="true" class="list-item">1</div>
2、拖拽的时候本身元素的样式得变

准备样式
       .list-item.moving {background-color: transparent;color: transparent;border: 1px solid #ccc;}
3、什么时候产生排序

拖拽的时候把拖拽对象放到了某些元素之上，这里就要监听拖拽进入事件
el.addEventListener('dragenter', function (e) {})

3、源码及注释

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.list-item {background-color: #266fff;border-radius: 5px;color: #fff;width: 250px;padding: 5px;margin-bottom: 10px;}.list-item.moving {background-color: transparent;color: transparent;border: 1px solid #ccc;}</style></head><body><div class="list"><div draggable="true" class="list-item">1</div><div draggable="true" class="list-item">2</div><div draggable="true" class="list-item">3</div><div draggable="true" class="list-item">4</div><div draggable="true" class="list-item">5</div></div></body><script>// 拖拽排序在很多站点里面是非常常见的，使用的API就是一个拖拽API// 1、让元素变的可拖拽   找到这些元素，给这些元素加上 draggable 属性，值为true，这样就变得可拖拽了// 2、拖拽的时候样式得变   class为moving的样式const list = document.querySelector('.list')// 用事件委托的方式 给父元素绑定事件list.addEventListener('dragstart', function (e) {// 当拖拽开始的时候要找到拖拽的那个元素给他添加类样式// 为什么要用setTimeout,不用的话拖拽的那个元素也会变成虚线（就是添加了类样式后的样子），// 它的样式取决于拖拽开始时候元素本身的样式，需要在拖拽开始的时候保持原来的样式 把它变成异步的setTimeout(() => {e.target.classList.add('moving')}, 0)sourceNode = e.target})// 用来记录当前拖拽的是哪个元素let sourceNode = null// 3、什么时候产生排序？拖拽的时候把拖拽对象放到了某些元素之上，这里就要监听拖拽进入事件list.addEventListener('dragenter', function (e) {e.preventDefault()// 排除掉一些情况，比如拖拽的时候进入了父元素 或者 是本身自己if (e.target == list || e.target == sourceNode) returnconst children = [...list.children]// 通过所处元素的下标来判断是上方还是下方const sourceIndex = children.indexOf(sourceNode)const targetIndex = children.indexOf(e.target)console.log(sourceIndex, targetIndex)// 4、当拖拽的元素进入到别的元素身上的时候，要做的一些事情if (sourceIndex < targetIndex) {// console.log('下方')// 插入到那个元素下一个元素之前list.insertBefore(sourceNode, e.target.nextElementSibling)} else {//  console.log('上方')list.insertBefore(sourceNode, e.target)}console.log(sourceIndex)})// 拖拽完毕 松开鼠标list.addEventListener('dragend', function (e) {// 移除掉类样式即可sourceNode.classList.remove('moving')})</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/810478.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！