超简单的原生Hmtl实现元素拖拽交换顺序

目录

前言

解析

代码

属性方法解释

---

前言

相信大家在进行项目开发时都会遇到元素拖拽交换顺序的需求，要实现这个需求有很多种方式，可以通过外部组件，也可以通过原生的draggable方法，此片文章将介绍一下draggable的使用，无需任何外部组件。

解析

拖拽交换顺序有两种，一种是将元素拖拽到其他元素的前面或后面，另一种是将元素拖拽到其他元素的位置，并直接交换它们的位置。

在此我们演示将张三拖拽到王五的位置：

拖拽前

拖拽后

可以看到，第一种是直接将张三插入到了王五的后面，第二种则是将张三与王五交换了顺序。第一种还加入了拖拽的标识线，在拖拽过程中可以确定拖拽后是插入到目标元素前面还是后面。

代码

属性方法解释

• draggable="true" ：设置元素可拖拽。
• @dragover.prevent：阻止默认的拖拽事件。
• @dragstart="handleDragStart(index)"：拖拽开始时调用handleDragStart函数，并传入当前索引。
• @drop="handleDrop(index)" ：拖放操作成功完成的事件，它在拖动元素被放置在目标元素上时触发。只有当拖动元素被放置在目标元素上时，才会被触发。

• @dragover="handleOver(index)"：拖拽经过时触发，会显示一条拖拽插入的位置的标识线。

• @dragend="handleDragLeave"：拖放操作结束的事件，它在拖动元素放下（释放鼠标按键）时触发。无论拖动元素是否被放置在目标元素上，都会被触发。

以上则是原生html实现的两种元素拖拽的效果，可以根据实际情况灵活选用。