Feature-rich Draggable & Sortable Library For Vue – dndrop

This is the upgraded version of the vue-smooth-dnd that enables draggable and sortable functionalities on Vue applications.

How to use it:

1. Import necessary resources.

import { Container, Draggable } from "vue-smooth-dnd";
import { applyDrag, generateItems } from "./utils";

2. Add draggable components to the app.

<template>
  <div>
    <div class="simple-page">
        <Container @drop="onDrop">
          <Draggable v-for="item in items" :key="item.id">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </Draggable>
        </Container>
    </div>
  </div>
</template>

export default {
  name: "Simple",
  components: { Container, Draggable },
  data() {
    return {
      items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
    };
  },
  methods: {
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult);
    }
  }
};

3. Available props.

// Can be move or copy or drop-zone or contain.
behaviour: String,
groupName: String,
orientation: String,
dragHandleSelector: String,
nonDragAreaSelector: String,
dragBeginDelay: Number,
animationDuration: Number,
autoScrollEnabled: { type: Boolean, default: true },
lockAxis: String,
dragClass: String,
dropClass: String,
removeOnDropOut: { type: Boolean, default: false },
'drag-start': Function,
'drag-end': Function,
drop: Function,
getChildPayload: Function,
shouldAnimateDrop: Function,
shouldAcceptDrop: Function,
'drag-enter': Function,
'drag-leave': Function,
tag: {
  validator: validateTagProp,
  default: 'div',
},
getGhostParent: Function,
'drop-ready': Function,
dropPlaceholder: [Object, Boolean]

Preview:

Changelog:

v1.2.8 (05/09/2022)

• bugfixed

v1.2.0 (01/04/2021)

• update

v1.1.1 (12/01/2021)

• vue-dndrop now supports vue 3.x with the tag next

v1.1.0 (10/01/2021)

• vue-dndrop now supports vue 3.x with the tag next: [email protected]

v1.0.2 (09/02/2021)

• @drop not allowed for either being a no-drop zone or not suiting the validation rules at a specific state

Download Details:

Author: amendx

Live Demo: https://amendx.github.io/vue-dndrop

Download Link: https://github.com/amendx/vue-dndrop/archive/refs/heads/master.zip

Official Website: https://github.com/amendx/vue-dndrop

Install & Download:

# Vue 2
$ npm i vue-dndrop --save

# Vue 3
$ npm i [email protected] --save