快速开始

vue-draggable-plus开始-简介

快速开始

vue-draggable-plus 是一款拖拽排序模块，全面支持 Vue >= v3 或 Vue >= 2.7。

使用说明

由于 Sortablejs 官方维护的 Vue 3 组件长期未更新，与新版 Vue 3 已经严重脱节，因此诞生了这个项目。本组件基于 Sortablejs 构建，如果你想深入了解底层实现，可以参考 Sortablejs 官网。

我们针对不同的使用场景提供了 组件方式、函数方式 和 指令方式 三种封装用法，总有一款适合您的项目。

解决痛点

在 Sortablejs 官方此前的 Vue 组件中，只能通过组件作为列表的直接子元素来实现拖拽列表。当您使用某些组件库时，如果组件库没有提供列表根元素的插槽，将很难实现拖拽列表。vue-draggable-plus 完美解决了这个问题，它允许您在任何元素上使用拖拽列表。只需通过指定元素的选择器获取列表根元素，并将其作为 Sortablejs 的 container 即可，详情参考指定目标容器。

安装

bash 复制代码

npm install vue-draggable-plus

使用

组件方式

vue 复制代码

<template>
  <VueDraggable ref="el" v-model="list">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
</script>

函数方式

vue 复制代码

<template>
  <div ref="el">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

const el = ref()

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

// 返回值是一个对象，包含 start、destroy、pause 等方法
const draggable = useDraggable(el, list, {
  animation: 150,
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})
</script>

指令方式

vue 复制代码

<template>
  <div
    v-draggable="[
      list,
      {
        animation: 150,
      }
    ]"
  >
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  console.log('start')
}

function onUpdate() {
  console.log('update')
}
</script>

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。