Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

npm install vue-draggable-plus

<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>

<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>

<template>
  <VueDraggable ref="el" v-model="list" @start="onStart" @end="onEnd">
    <div v-for="item in list" :key="item.id" class="drag-item">
      <NodejsButton :title="item.name" />
    </div>
  </VueDraggable>
</template>

<script setup>
import { ref } from 'vue'
import NodejsButton from '@/components/button/nodejs-button.vue'
import { VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Aoooooo',
    id: 1
  },
  {
    name: 'Boooooo',
    id: 2
  },
  {
    name: 'Coooooo',
    id: 3
  },
  {
    name: 'Doooooo',
    id: 4
  }
])

const onStart = (e) => {
  e.item.style.backgroundColor = '#ffffff22'
}
const onEnd = () => {}
</script>

<style>
.drag-item {
  width: 240px;
  margin-bottom: 15px;
  cursor: grab;
  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>