A Vue Library for Draggable & Sortable Drag and Drop | dndrop

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

    <div class="simple-page">
        <Container @drop="onDrop">
          <Draggable v-for="item in items" :key="item.id">
            <div class="draggable-item">
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 define the visual behaviour of the library:

:orientationstringverticalOrientation of the container. Can be horizontal or vertical.
:behaviourstringmoveProperty to describe weather the dragging item will be moved or copied to target container. Can be move or copy or drop-zone or contain.
:tagstring or NodeDescriptiondivSee descriptions below
:group-namestringundefinedDraggables 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-axisstringundefinedLocks the movement axis of the dragging. Possible values are xy or undefined.
:drag-handle-selectorstringundefinedCss selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.
:non-drag-area-selectorstringundefinedCss 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-delaynumber0 (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-durationnumber250Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.
:auto-scroll-enabledbooleantrueFirst scrollable parent will scroll automatically if dragging item is close to boundaries.
:drag-classstringundefinedClass 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-classstringundefinedClass to be added to the ghost item just before the drop animation begins.
:remove-on-drop-outbooleanundefinedWhen set true onDrop will be called with a removedIndex if you drop element out of any relevant container
:drop-placeholderboolean,objectundefinedOptions for drop placeholder. classNameanimationDurationshowOnTop
:fire-related-events-onlybooleanfalseDefines 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

See Demo And Download

Official Website(amendx): Click Here

This superior jQuery/javascript plugin is developed by amendx. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…