low-code-draggable-plus

This package is based on vue draggable plus. For more information, please visit vue-draggable-plus

new feature

modifyDataBeforeAdd This property is used for multiple lists. When dragging a list into multiple nested Vue Draggable components, different components may accept different data formats. This property allows the dragged item to be placed before a specific nested component, enabling data processing.

1<template>
2  <VueDraggable v-model="list" group="people">
3    <div
4      v-for="item in list1"
5      :key="item.id"
6      class="cursor-move h-30 bg-gray-500/5 rounded p-3"
7    >
8      {{ item.name }}
9    </div>
10  </VueDraggable>
11  <VueDraggable
12    v-model="list2"
13    group="people"
14    :modifyDataBeforeAdd="modifyDataBeforeAdd"
15  >
16    <div
17      v-for="item in list2"
18      :key="item.id"
19      class="cursor-move h-30 bg-gray-500/5 rounded p-3"
20    >
21      {{ item.name }}
22    </div>
23  </VueDraggable>
24</template>
25<script setup lang="ts">
26import { VueDraggable } from "low-code-draggable-plus";
27const list1 = ref([
28  {
29    name: 'Joao',
30    id: '1'
31  },
32  {
33    name: 'Jean',
34    id: '2'
35  },
36  {
37    name: 'Johanna',
38    id: '3'
39  },
40  {
41    name: 'Juan',
42    id: '4'
43  }
44])
45const list2 = ref(
46  list1.value.map(item => ({
47    name: `${item.name}-2`,
48    id: `${item.id}-2`
49  }))
50)
51function modifyDataBeforeAdd(data) {
52  return {
53    ...data,
54    name: 'cs'
55  }
56}
57</script>