双列表拖拽排序

多列表之间拖拽排序，双向绑定数据。

组件使用

Joao

Jean

Johanna

Juan

Joao-2

Jean-2

Johanna-2

Juan-2

[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]

[
  {
    "name": "Joao-2",
    "id": "1-2"
  },
  {
    "name": "Jean-2",
    "id": "2-2"
  },
  {
    "name": "Johanna-2",
    "id": "3-2"
  },
  {
    "name": "Juan-2",
    "id": "4-2"
  }
]

使用组件使用组件方式在多列表之间拖拽排序

复制成功!

<template>
  <div class="flex">
    <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>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </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>

函数使用

Joao

Jean

Johanna

Juan

Joao-2

Jean-2

Johanna-2

Juan-2

[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]

[
  {
    "name": "Joao-2",
    "id": "1-2"
  },
  {
    "name": "Jean-2",
    "id": "2-2"
  },
  {
    "name": "Johanna-2",
    "id": "3-2"
  },
  {
    "name": "Juan-2",
    "id": "4-2"
  }
]

函数方式使用 函数方式在多列表之间拖拽排序

复制成功!

<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el1"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el2"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDraggable } 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`
  }))
)

const el1 = ref()
const el2 = ref()

useDraggable(el1, list1, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list1')
  },
  onAdd: () => {
    console.log('add list1')
  },
  remove: () => {
    console.log('remove list1')
  }
})

useDraggable(el2, list2, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list2')
  },
  onAdd: () => {
    console.log('add list2')
  },
  remove: () => {
    console.log('remove list2')
  }
})
</script>

指令使用

Joao

Jean

Johanna

Juan

Joao-2

Jean-2

Johanna-2

Juan-2

[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]

[
  {
    "name": "Joao-2",
    "id": "1-2"
  },
  {
    "name": "Jean-2",
    "id": "2-2"
  },
  {
    "name": "Johanna-2",
    "id": "3-2"
  },
  {
    "name": "Juan-2",
    "id": "4-2"
  }
]

指令方式使用指令方式在多列表之间拖拽排序

复制成功!

<template>
  <div class="flex">
    <section
      v-draggable="[
        list1,
        {
          animation: 150,
          ghostClass: 'ghost',
          group: 'people',
          onUpdate,
          onAdd,
          onRemove
        }
      ]"
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      v-draggable="[
        list2,
        {
          animation: 150,
          ghostClass: 'ghost',
          group: 'people',
          onUpdate,
          onAdd,
          onRemove
        }
      ]"
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { vDraggable } 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 onRemove() {
  console.log('remove')
}
</script>