A Vue Library for Draggable & Sortable Drag and Drop

vue-dndrop is a fast and lightweight drag-and-drop library for Vue.js with many configuration options, covering multiple scenarios.

sortablejs, sortablejs examples, jquery sortable div drag and drop, sortablejs cdn, sortable list, bootstrap sortable list, jquery draggable, drag and drop html, html drag and drop example, drag and drop javascript

How to make use of it:

Install and download:

# NPM
$ npm i vue-dndrop --save

1. Import the necessary resources.

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

2. Add draggable components to the application.

<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. Props are available.

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

Properties

Properties define the visual behaviour of the library:

Property	Type	Default	Description
:orientation	string	`vertical`	Orientation of the container. Can be horizontal or vertical.
:behaviour	string	`move`	Property to describe weather the dragging item will be moved or copied to target container. Can be move or copy or drop-zone or contain.
:tag	string or NodeDescription	`div`	See descriptions below
:group-name	string	`undefined`	Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overriden by shouldAcceptDrop function. See below.
:lock-axis	string	`undefined`	Locks the movement axis of the dragging. Possible values are x, y or undefined.
:drag-handle-selector	string	`undefined`	Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.
:non-drag-area-selector	string	`undefined`	Css selector to prevent dragging. Can be useful when you have form elements or selectable text somewhere inside your draggable item. It has a precedence over dragHandleSelector.
:drag-begin-delay	number	`0` (`200` for touch devices)	Time in milisecond. Delay to start dragging after item is pressed. Moving cursor before the delay more than 5px will cancel dragging.
:animation-duration	number	`250`	Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.
:auto-scroll-enabled	boolean	`true`	First scrollable parent will scroll automatically if dragging item is close to boundaries.
:drag-class	string	`undefined`	Class to be added to the ghost item being dragged. The class will be added after it’s added to the DOM so any transition in the class will be applied as intended.
:drop-class	string	`undefined`	Class to be added to the ghost item just before the drop animation begins.
:remove-on-drop-out	boolean	`undefined`	When set true onDrop will be called with a removedIndex if you drop element out of any relevant container
:drop-placeholder	boolean,object	`undefined`	Options for drop placeholder. className, animationDuration, showOnTop
:fire-related-events-only	boolean	`false`	Defines if only events related to the selected containers will be fired

Feature-rich Draggable & Sortable Library For Vue, vue-dndrop Plugin/Github, drag and drop ui, drag and drop jquery, javascript drag and drop example