首页 > 其他分享 >Vue3拖拽功能 vue-draggable-plus

Vue3拖拽功能 vue-draggable-plus

时间:2024-08-09 11:27:28浏览次数:11  
标签:vue name 拖拽 draggable item plus id

Vue拖拽功能 vue-draggable-plus,支持V2和V3


文章目录


介绍 VueDraggablePlus

最近需要pc上做拖拽功能,之前在移动端使用的是Sortablejs,由于 Sortablejs 的 vue3 组件一直没有更新,已经跟 vue3 严重脱节,所以诞生了这个VueDraggablePlus项目。这次就对VueDraggablePlus的使用记录一下。
官方地址:
VueDraggablePlus官网
在这里插入图片描述


一、使用说明

版本支持

拖拽排序模块,支持 Vue>=v3 或 Vue >=2.7。V2和V3都是支持的大家可以放心使用。

安装

npm install vue-draggable-plus

二、使用实例

1.双列表拖拽

代码如下(示例):

<template>
  <div class="flex" style="width: 600px; margin: 100px auto">
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list1"
      animation="150"
      ghostClass="ghost"
      group="people"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div v-for="item in list1" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list2"
      animation="150"
      group="people"
      ghostClass="ghost"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div v-for="item in list2" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
const list1 = ref([
  {
    name: 'Joao',
    id: '1',
  },
  {
    name: 'Jean',
    id: '2',
  },
  {
    name: 'Johanna',
    id: '3',
  },
  {
    name: 'Juan',
    id: '4',
  },
]);
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`,
  })),
);
function onUpdate() {
  console.log('update');
}
function onAdd() {
  console.log('add');
}
function remove() {
  console.log('remove');
}
</script>

代码执行效果图:

在这里插入图片描述

2.更多拖拽效果

以上代码只是展示了双列表拖拽,文档里面还有更多的拖拽方式可以按需尝试。
在这里插入图片描述

总结

使用很方便,不需要安装过多的依赖,下载即用。所以如果你想了解更多关于 Sortablejs 的信息,可以查看Sortablejs 官网

标签:vue,name,拖拽,draggable,item,plus,id
From: https://blog.csdn.net/weixin_46613448/article/details/141031215

相关文章