vue拖拽排序

---

前言

例如：相信各位前端开发的小伙伴，在开发中最常遇到的就是后台管理系统，后台管理系统里面最最常用的又是表格，那么多多少少就会涉及到表格拖拽。那么今天我们就来实现一个简单的拖拽排序功能。（注意：本章不是表格的拖拽排序，下一章我们会实现表格的拖拽排序）

---

一、思路

思路很简单，1，拖拽；2，排序

二、上代码

<template>
  <div class="tuozhuai">
    <!-- draggable="true"添加拖拽 -->
    <!-- dragstart拖拽开始 -->
    <!-- drop拖拽结束 -->
    <div
      v-for="(item, index) in items"
      :key="index"
      draggable="true"
      @dragstart="handleDragStart(index, $event)"
      @dragover.prevent
      @drop="handleDrop(index, $event)"
      class="item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: "TuoZhuai",
  data() {
    return {
      items: [1, 2, 3, 4], // 初始列表
      draggingIndex: null, // 当前正在拖拽的元素的索引
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggingIndex = index;
    },
    handleDrop(dropIndex, event) {
      // 阻止默认行为
      event.preventDefault();
      console.log(dropIndex, "21323");
      // 如果拖拽的是同一个位置，则不执行任何操作
      if (this.draggingIndex === dropIndex) {
        return;
      }
      // 移除拖拽的元素
      const item = this.items.splice(this.draggingIndex, 1)[0];
      // 在新的位置插入元素
      this.items.splice(dropIndex, 0, item);
      // 清除拖拽索引
      this.draggingIndex = null;
    },
  },
};
</script>

<style scoped>
.item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move; /* 提示用户可以移动这个元素 */
}
</style>

三、效果演示

---

总结

这样一个简单的拖拽排序就做好了，很简单，就俩步，1，拖拽。2，排序。（下一期会出一个详细的表格拖拽的案例）