Vue 3 Draggable

Vue 3 Draggable component (DEMO)

Features

• Dragging
• Controls whether dragging is possible
• Dropping animation effect
• Custom HTML tag
• Drag and drop of different blocks

Getting started

Installation

First step is to install it using yarn、npm or pnpm:

npm install vue3-draggable-tzu

# or use yarn
yarn add vue3-draggable-tzu

# or use pnpm
pnpm install vue3-draggable-tzu

Precautions

If you use Vite Tooling and report an error (TypeError: Cannot read properties of null (reading 'setupContext')):

defineConfig({
  ...
  resolve: {
    dedupe: ['vue'],
  },
});

Basic Using

<script setup>
import { ref, computed } from 'vue';
import { Draggable } from 'vue3-draggable-tzu';

const list1 = ref([
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
  { id: 3, name: 'name3' },
]);
const list2 = ref([
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
  { id: 3, name: 'name3' },
]);
const animationClass = {
  moveToBefore: 'draggable-drop-up',
  moveToAfter: 'draggable-drop-down',
};
</script>

<template>
  <draggable
    v-model="list1"
    :tag="'ul'"
    class="draggable"
    :animation="animationClass"
    draggable=".item" // or without
  >
    <li v-for="item in list1" :key="item.id" :class="item.id === 1 && 'item'">
      <p>id: {{ item.id }}</p>
      <p>name: {{ item.name }}</p>
    </li>
  </draggable>

  <draggable
    v-model="list2"
    :tag="'ul'"
    class="draggable"
    :animation="animationClass"
    draggable=".item"
  >
    <li v-for="item in list2" :key="item.id" :class="item.id === 1 && 'item'">
      <p>id: {{ item.id }}</p>
      <p>name: {{ item.name }}</p>
    </li>
  </draggable>
</template>

<style>
.draggable {
  ...
  .draggable-drop-up {
    animation: dropUp 0.2s ease-in-out forwards;
  }

  .draggable-drop-down {
    animation: dropDown 0.2s ease-in-out forwards;
  }

  @keyframes dropUp {
    ...
  }

  @keyframes dropDown {
    ...
  }
}
</style>

Props

Name | Required | Type | Description | :--- | :--- | :--- | :--- | modelValue | true | Array | v-model value | tag | false | String | custom HTML tag - default <div> | animation | false | Object | keys for moveToBefore and |moveToAfter

Attrs

Name | Required | Type | Description | :--- | :--- | :--- | :--- | class | false | String | custom class | draggable | false | String | draggable for item class |