Vue3 实现拖拽排序

àì夳堔傛蜴生んèń 2023-09-27 20:48 4阅读 0赞

## Vue3 实现拖拽排序 ##

我们使用的拖拽事件有：

*  **draggable：设置为可拖拽状态，true**
 *  **dragstart：开始拖拽**
 *  **dragover：在拖拽过程中**
 *  **drop：在拖拽完成时，将拖拽的元素替换到目标位置**
 *  **dragend 在拖拽结束时，通过dragEnd函数将dragItem变量重置为null。**

## **效果图** ##

*  ![7a6984e6c0044ecda109d60ad3332dd2.png][]

## 话不多说，直接撸代码 ##

<template>
        <div>
          <div class="drag-item"
               v-for="item in list"
               :key="item.id"
               :draggable="true"
               @dragstart="dragStart(item, $event)"
               @dragover="dragOver($event)"
               @drop="drop(item, $event)"
               @dragend="dragEnd(item)"
          >
            {
       { item.name }}
          </div>
        </div>
      </template>
       
      <script setup lang="ts">
      import { ref } from 'vue';
      //数据
      const list = ref([
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grape' },
        { id: 5, name: 'Mango' }
      ]);
      //创建dragItem变量，用于保存正在拖拽的元素
      let dragItem = ref(null) ;
       
      //在拖拽开始时，通过dragStart函数将当前拖拽的元素保存到dragItem变量中，
      // 并将拖拽的数据以字符串形式存储在数据传输对象中。
      function dragStart(item, event) {
        dragItem.value = item;
        //设置拖拽操作的效果为移动,
        //这里也可以说一下拖拽的几个效果
        // 'none': 不允许拖拽操作。
        // 'copy': 拖拽操作会复制被拖拽的数据。
        // 'move': 拖拽操作会移动被拖拽的数据。
        // 'link': 拖拽操作会创建一个指向被拖拽数据的链接。
        // 在设置 effectAllowed 属性后，可以在 dragstart 和 dragover 事件中使用 dropEffect 属性来指定拖拽操作的效果。
        event.dataTransfer.effectAllowed = 'move';
        //并将拖拽的数据以字符串形式存储在数据传输对象中。
        // 其中，item是一个JavaScript对象，通过JSON.stringify()方法将其转换为字符串。
        event.dataTransfer.setData('text/plain', JSON.stringify(item));
      }
       
      //在拖拽过程中，使用dragOver函数监听dragover事件，
      // 并调用event.preventDefault()方法，以允许元素被拖拽到新的位置。
      function dragOver(event:any) {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
      }
       
      //在拖拽完成时，使用drop函数将拖拽的元素替换到目标位置，并更新list数组。
      function drop(item:any, event:any) {
        event.preventDefault();
        /**
         * 从数据传输对象中获取之前通过 setData() 方法存储的数据，
         * 通过 JSON.parse() 方法将其转换为对象。
         * 用于获取在拖拽操作中传递的数据。
         */
        const data = JSON.parse(event.dataTransfer.getData('text/plain'));
        console.log('data',data)
        console.log('item',item)
        //通过 findIndex() 方法查找 list 数组中第一个满足条件的元素的索引，这里的条件是该元素的 id 属性等于 item 对象的 id 属性。
        //被替换的元素
        const index1 = list.value.findIndex(i => i.id === item.id);
        //通过 findIndex() 方法查找 data 对象在 list 数组中的索引
        const index2 = list.value.findIndex(i => i.id === data.id);
        list.value[index1] = data;
        list.value[index2] = item;
      }
      //在拖拽结束时，通过dragEnd函数将dragItem变量重置为null。
      function dragEnd(item) {
        dragItem.value = null;
      }
      </script>
       
      <style scoped>
      .drag-item {
        margin: 10px;
        padding: 10px;
        background-color: #f0f0f0;
        cursor: move;
        color:red
      }
      </style>

[7a6984e6c0044ecda109d60ad3332dd2.png]: https://img-blog.csdnimg.cn/7a6984e6c0044ecda109d60ad3332dd2.png