agnostic-draggable is an undefined set of libraries that implement drag, drop, and sort behaviors inspired by jQuery UI. To enable the drag function on any DOM. Move a Draggable by clicking and dragging it anywhere inside the viewport.

Converts items into areas that can be dropped. This means that Draggable Controlled items can be dropped into Droppable if you accept them. Transforms items containing multiple subnodes in such a way that these subnodes can be sorted with the mouse.

Draggable

Enables the drag functionality on any DOM element. Move the Draggable element by clicking and dragging it anywhere within the viewport.

Elements modified or created will use the same CSS classes inherited from the jQuery UI implementation:

• ui-draggable: the element being dragged
• ui-draggable-handle: The handle of the pullable element. By default, each draggable is also a handle
• ui-draggable-helper: the dragging helper

Must Read: Customizable, Draggable, and Infinitely Looping Carousels | Jelly Slider

How to make use of it:

1. Install & Download the package.

# NPM
$ npm i agnostic-draggable --save

2. Import the Draggable/Droppable/Sortable parts 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 immediately load the agnostic-draggable.min.js JavaScript within the doc.

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

Draggable:

1. Enables a component 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 a record 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
    }
});

Options

Must Read: Draggable Drag-n-Drop Email Editor Component for Vue.js

Events

See Demo And Download

Official Website(marcospont): Click Here

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