vue3 基于vue-draggable-next实现拖动排序

安装三方库

npm install vue-draggable-next

代码示例

<template>
  <VueDraggableNext v-model="list"  @end="onDragEnd(list)">
    <transition-group>
      <div class="item" v-for="element in list" :key="element.id">
        {{ element.name }}
        <a-button>移动</a-button>
      </div>
    </transition-group>
  </VueDraggableNext>
</template>
  
  <script>
import { ref } from "vue";
import { VueDraggableNext } from "vue-draggable-next";

export default {
  components: {
    VueDraggableNext,
  },

  setup() {
    // 定义列表数据
    const list = ref([
      { name: "John", id: 1 },
      { name: "Joao", id: 2 },
      { name: "Jean", id: 3 },
      { name: "Gerard", id: 4 },
    ]);

    // 拖拽结束回调
    const onDragEnd = (event) => {
      console.log(event);
    };

    return {
      list,
      onDragEnd,
    };
  },
};
</script>
  
  <style>
.item {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>

代码解释

这是一个使用Vue和vue-draggable-next实现拖拽排序的示例代码,主要功能点如下:

•

导入并注册VueDraggableNext组件,它封装了拖拽所需的逻辑。

•

使用ref声明式地定义一个list数组,用于存储排序项的数据。

•

在template中,使用v-for循环渲染列表项,并用key绑定唯一id。

•

使用transition-group组件包装列表项,以获得动画效果。

•

VueDraggableNext组件用v-model绑定list数组,管理拖拽排序后的列表数据。

•

通过为VueDraggableNext绑定@start和@end事件回调,在拖拽开始和结束时执行自定义逻辑。

•

onDragEnd方法接收拖拽结束后的新列表数据,这里 simply打印输出。

•

定义CSS来控制列表项的样式。

这样就可以获得一个拖拽排序功能,并在拖拽事件发生时执行代码。组件化和声明式编程让代码更简洁清晰。

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

安装三方库

代码示例

代码解释

读者评论