VueDraggablePlus的学习与问题解决

<template>
  <div>
    <draggable-plus
      v-model="list"
      group="people"
      @change="logEvent"
    >
      <template #item="{ element }">
        <div class="list-item">{{ element.name }}</div>
      </template>
    </draggable-plus>
  </div>
</template>
 
<script>
import { DraggablePlus } from 'vue-draggable-plus';
 
export default {
  components: {
    DraggablePlus
  },
  data() {
    return {
      list: [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Doe' },
        { id: 3, name: 'Jim Beam' }
      ]
    };
  },
  methods: {
    logEvent(event) {
      console.log('Event:', event);
    }
  }
};
</script>
 
<style scoped>
.list-item {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}
</style>

这个代码实例展示了如何使用VueDraggablePlus组件创建一个可拖拽的列表。它定义了一个名为list的数组，其中包含一些人的信息。然后，它使用draggable-plus组件来渲染这个列表，并允许用户拖拽重新排序。同时，它使用了作用域插槽来自定义每个列表项的外观。最后，它还展示了如何监听change事件来记录拖拽操作。