Vue3拖拽功能【VueDraggablePlus】

<template>
  <div>
    <DraggablePlus v-model="list" @change="logEvent">
      <template #item="{ element }">
        <div class="item">{{ element.name }}</div>
      </template>
    </DraggablePlus>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import DraggablePlus from 'vue-draggable-plus';
 
export default {
  components: {
    DraggablePlus
  },
  setup() {
    const list = ref([
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' },
      // ...更多项
    ]);
 
    function logEvent(event) {
      console.log(event);
    }
 
    return { list, logEvent };
  }
};
</script>
 
<style scoped>
.item {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}
</style>

这个例子展示了如何在Vue 3应用中使用vue-draggable-plus组件来实现一个列表的拖拽功能。v-model用于双向绑定列表数据，并且提供了一个#item插槽来自定义每个列表项的外观。@change事件用于监听拖拽操作，并且可以通过一个方法来处理这些事件，例如记录日志或执行进一步的操作。