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.

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]

Read More – Drag and Drop File Upload Plugin for Bootstrap 4 | bs-dropzone.js

Properties

Properties define the visual behavior of the library:

PropertyTypeDefaultDescription
:orientationstringverticalOrientation of the container. Can be horizontal or vertical.
:behaviourstringmoveProperty to describe whether the dragging item will be moved or copied to the target container. Can be move or copy or the drop-zone contain.
:tagstring or NodeDescriptiondivSee descriptions below
:group-namestringundefinedDraggable can be moved between the containers having the same group names. If a not set container will not accept drags from outside. This behavior can be overridden 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 within 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 precedence over dragHandleSelector.
:drag-begin-delaynumber0 (200 for touch devices)Time in milliseconds. Delay starts dragging after the item is pressed. Moving the cursor before the delay of more than 5px will cancel dragging.
:animation-durationnumber250Animation duration in milliseconds. To be consistent this animation duration will be applied to both drops and reorder animations.
:auto-scroll-enabledbooleantrueFirst, the scrollable parent will scroll automatically if the dragging item is close to the 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 is to be added to the ghost item just before the drop animation begins.
:remove-on-drop-outbooleanundefinedWhen set to true onDrop will be called with a removedIndex if you drop an 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

Read More – 

Drag and Drop Website Builder Javascript Library | VvvebJs
[Drag And Drop] A Minimal Javascript Library to Create Flow Charts | Flowy.js

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 Usage, please go to the official website.

Share