vue2,3拖拽组件

vue3

//npm i [email protected] --save


//dom
< template >
    <Draggable v-model="list.data" class="drag-container">
      <template #item="{ element }">
        <div >{{ element.name }}</div>
      </template>
    </Draggable>
< template />



<script setup>
import {onBeforeUnmount, ref, shallowRef, onMounted,reactive} from 'vue'
//页面引入
import Draggable from 'vuedraggable';
//模拟数据
const list = reactive({
  data: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ]
})
</script>

vue2

//npm install vuedraggable


<template>
  <div>
    <draggable v-model="list" class="drag-container">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ],
    };
  },
};
</script>