Draggable/Droppable/Sortable Components In Vanilla JavaScript – Agnostic Draggable

Category: Drag & Drop , Javascript , Recommended | December 3, 2020
Author: marcospont
Views Total: 133 views
Official Page: Go to website
Last Update: December 3, 2020
License: MIT

Preview:

Draggable/Droppable/Sortable Components In Vanilla JavaScript – Agnostic Draggable

Description:

An easy-to-use, framework-agnostic drag’n’drop JavaScript library that enables any element to be draggable, droppable, and sortable.

Inspired by jQuery UI and without any 3rd libraries like jQuery.

Table Of Contents:

Installation:

1. Install & Download the package.

# NPM
$ npm i agnostic-draggable --save

2. Import the Draggable/Droppable/Sortable components as ES modules.

// draggable
import { Draggable } from 'agnostic-draggable';

// sortable
import { Sortable } from 'agnostic-draggable';

// draggable + droppable
import { Draggable, Droppable } from 'agnostic-draggable';

3. Or directly load the agnostic-draggable.min.js JavaScript in the document.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/agnostic-draggable.min.js"></script>

Draggable:

1. Enables an element to be draggable.

<div id="draggable">Drag Me</div>
new Draggable(document.querySelector('#draggable'), {
    // options here
}, eventHandlers);

2. Available options for Draggable.

new Draggable(document.querySelector('#draggable'), {

    // append the draggable element to a specific element
    appendTo: 'parent',

    // x or y
    axis: null,

    // connect to a Sortable list
    // e.g. '#sort'
    connectToSortable: null,

    // parent, document, window, a CSS selector or an array of 4 numbers in the form [x1, y1, x2, y2]
    containment: null,

    // cursor type
    cursor: null,

    // if the draggable element is disabled
    disabled: false,

    // distance in pixels that the mouse should move before the dragging should start.
    distance: 0,

    // snap the dragging helper to a grid
    // e.g. [10, 10]
    grid: null,

    // drag handle element
    handle: null,

    // original, clone or a function
    helper: 'original',

    // opacity of the draggable element while being dragged
    opacity: null,

    // invalid, valid, true, false or a function
    revert: false,

    // duration in milliseconds
    revertDuration: 200,

    // used to group sets of Draggable, Droppable and Sortable elements
    scope: 'default',

    // determine whether the container is scrollable
    scroll: true,
    scrollSensitivity: 20,
    scrollSpeed: 10,

    // stack to another element
    stack: null,

    // ignore these elements
    skip: 'input, textarea, button, select, option',

    // z-index property
    zIndex: null
    
});

3. Available events for Draggable.

new Draggable(document.querySelector('#draggable'), {OPTIONS}, {
    'draggable:init ': function (event) {
      // do something
    },
    'drag:start': function (event) {
      // do something
    },
    'drag:move': function (event) {
      // do something
    },
    'drag:stop': function (event) {
      // do something
    },
    'draggable:destroy': function (event) {
      // do something
    }
});

Droppable:

1. Enables an element to be droppable.

<div id="droppable">Drop Here</div>
new Droppable(document.querySelector('#droppable'), {
    // options here
}, eventHandlers);

2. Available options for Droppable.

new Droppable(document.querySelector('#droppable'), {

    // which Draggable elements are accepted
    accept: '*',

    // disable the Droppable behaviour
    disabled: false,

    // handle dropping on nested Droppable elements
    greedy: false,

    // used to group sets of Draggable, Droppable and Sortable elements
    scope: 'default',

    // fit, intersect, pointer or touch
    tolerance: 'intersect'
    
}, eventHandlers);

3. Available events for Droppable.

new Droppable(document.querySelector('#droppable'), {OPTIONS}, {
    'droppable:init': function (event) {
      // do something
    },
    'droppable:activate': function (event) {
      // do something
    },
    'droppable:over': function (event) {
      // do something
    },
    'droppable:drop': function (event) {
      // do something
    },
    'droppable:out': function (event) {
      // do something
    },
    'droppable:deactivate': function (event) {
      // do something
    },,
    'draggable:destry': function (event) {
      // do something
    },
});

Sortable

1. Enables an list to be sortable.

<div id="sortable">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  ...
</div>
new Sortable(document.querySelector('#sortable'), {
    // options here 
}, eventHandlers);

2. Available options for Sortable.

new Sortable(document.querySelector('#sortable'), {

    // append the draggable element to a specific element
    appendTo: 'parent',

    // x or y
    axis: null,

    // connect to a Sortable list
    // e.g. '#sort'
    connectToSortable: null,

    // parent, document, window, a CSS selector or an array of 4 numbers in the form [x1, y1, x2, y2]
    containment: null,

    // cursor type
    cursor: null,

    // if the draggable element is disabled
    disabled: false,

    // distance in pixels that the mouse should move before the dragging should start.
    distance: 0,

    // if false, items from this Sortable can't be dropped on an empty connected Sortable
    dropOnEmpty: true,

    // force the sorting helper to have a size
    forceHelperSize: false,

    // force the sorting placeholder to have a size
    forcePlaceholderSize: false,

    // snap the dragging helper to a grid
    // e.g. [10, 10]
    grid: null,

    // drag handle element
    handle: null,

    // original, clone or a function
    helper: 'original',

    // specify which items should be sortable
    items: null,

    // opacity of the draggable element while being dragged
    opacity: null,

    // invalid, valid, true, false or a function
    revert: false,

    // duration in milliseconds
    revertDuration: 200,

    // used to group sets of Draggable, Droppable and Sortable elements
    scope: 'default',

    // determine whether the container is scrollable
    scroll: true,
    scrollSensitivity: 20,
    scrollSpeed: 10,

    // stack to another element
    stack: null,

    // ignore these elements
    skip: 'input, textarea, button, select, option',

    // z-index property
    zIndex: null

});

3. Available events for Sortable.

new Droppable(document.querySelector('#droppable'), {OPTIONS}, {
    'sortable:init': function (event) {
      // do something
    },
    'sortable:activate': function (event) {
      // do something
    },
    'sort:start': function (event) {
      // do something
    },
    'sort:move': function (event) {
      // do something
    },
    'sort:stop': function (event) {
      // do something
    },
    'sortable:over': function (event) {
      // do something
    },
    'sortable:change': function (event) {
      // do something
    },
    'sortable:remove': function (event) {
      // do something
    },
    'sortable:receive': function (event) {
      // do something
    },
    'sortable:update': function (event) {
      // do something
    },
    'sortable:out': function (event) {
      // do something
    },
    'sortable:deactivate': function (event) {
      // do something
    },
    'sortable:destroy': function (event) {
      // do something
    }
});

Changelog:

12/03/2020

  • fix: fixed wrong and missing parameters when emitting the sortmove event

You Might Be Interested In:


Leave a Reply