An agnostic set of libraries implementing draggable, droppable and sortable behaviours inspired by the jQuery UI implementation
npm install agnostic-draggable-bug-fixedImportant!
This repository is just a "copy" of the original agnostic-draggable with important bug fixes which have not yet been merged into the original. As a consequence, this repository may become obsolete as soon as the original package has been fixed.
The resulating package has been registered as NPM package "agnostic-draggable-bug-fixed"
(Original description follows)
Most of UI developers that worked with web apps from 2008 to 2014 certainly used or at least searched for a library implementing Drag & Drop support. From all the libraries that were available within that period, jQuery UI was certainly one of the best choices.
Years later, most of the web applications are tied to frameworks or rendering libraries like Angular, Vue and React and keeping jQuery and jQuery UI as a dependency to these projects can be a headache. In fact, moving away from jQuery is something that many development teams have experienced after these frameworks came into the scene.
However, finding a good replacement for what jQuery UI used to offer in terms of drag/drop capabilities is not easy. If you are looking for a solution that is tied to your framework/library of choice, there are plenty of options for you. But if you are looking for a VanillaJS based and agnostic implementation of drag & drop, you can find yourself browsing for a couple of hours finding just a few consistent options.
Shopify/Draggable is a nice alternative, although it has some crucial behaviour changes compared with what jQuery UI used to offer. SortableJS offers something similar to what the jQuery UIs Sortable widget offers. By looking at the examples, it seems to be even possible to mimic the behavior of the "connectToSortable" option of jQuery UI's Draggable widget, that allows an item to be dragged onto a list that has sort capabilities. Native Drag & Drop implementation from the browser? Forget it until it can support dragging an element using a cloned helper node. Furthermore, the API offered by the native implementation really sucks.
The solution? Translate the implementation of the Draggable, Droppable and Sortable widgets from jQuery UI into an agnostic, VanillaJS and ES6+ based library. Most of the options and features found in the original implementation by jQuery UI's team are here. The ones that were not translated/rewritten were just not part of the subset of features considered to be the most important ones. This doesn't mean that contributors cannot help finishing the task of bringing them in.
Using NPM, type in the following command to install agnostic-draggable:
``
npm i agnostic-draggable --save
Enables dragging functionality on any DOM element. Move the Draggable element by clicking on it and dragging it anywhere within the viewport.
Elements modified or created will use the same CSS classes inherited from jQuery UI's implementation:
- ui-draggable: the element being dragged
- ui-draggable-handle: the handle of the draggable element. By default, each draggable is also a handle
- ui-draggable-helper: the dragging helper
| Name | Type | Default | Description |
| :-------------------------------------------: | :-------------------------: | :---------------------------------------: | :----------------------------------------------------------------------: |
| appendTo | {String} | parent | Where to append the dragging helper. |axis
| | {String} | null | Constraint dragging movement to an axis. |connectToSortable
| | {String} | null | Allows the Draggable to be dropped onto the specified Sortable elements. |containment
| | {String,Array} | null | Constraints dragging movement to an element or region. |cursor
| | {String} | null | Allows changing the cursor style while dragging. |disabled
| | {Boolean} | false | Allows disabling the dragging behaviour. |distance
| | {Number} | 0 | Distance in pixels before dragging can start. |grid
| | {Array} | null | Snaps the dragging helper to a grid, every x and y pixels. |handle
| | {String} | null | Dragging only starts if click matches this selector. |helper
| | {String,Function} | original | Configures the dragging helper node. |opacity
| | {Number} | null | Allows changing the opacity while dragging. |revert
| | {Boolean,String,Function} | false | Whether the element should be reverted after dragging stops. |revertDuration
| | {Number} | 200 | Duration in milliseconds of the revert animation. |scope
| | {String} | default | Used to group sets of Draggable, Droppable and Sortable elements. |scroll
| | {Boolean} | true | Allows auto-scrolling within the container. |scrollSensitivity
| | {Number} | 20 | Scroll sensitivity in pixels. |scrollSpeed
| | {Number} | 10 | Scroll speed in pixels. |skip
| | {String} | input, textarea, button, select, option | Prevents dragging when this CSS selector is matched. |stack
| | {String} | null | Manages the z-indexes of Draggable elements matching this CSS selector. |zIndex
| | {Number} | null | Allows changing the z-index while dragging. |
Type: String parent
Default: parent
Accepted values: or a CSS selector
Which element the dragging helper should be appended to while dragging.
Only works when the helper option is set to not use the original element.
`html`Drag Me
`js
import { Draggable } from 'agnostic-draggable';
new Draggable(document.querySelector('#drag1'), {
appendTo: 'body'
});
`
Type: String x
Default: null
Accepted values: or y
Constrains dragging to either the horizontal (x) or vertical (y) axis.
`html`Drag Me
`js
import { Draggable } from 'agnostic-draggable';
new Draggable(document.querySelector('#drag1'), {
axis: 'x'
});
`
Type: String
Default: null
Accepted values: a CSS selector
Allows the Draggable to be dropped onto the specified Sortables. If this option is used, a Draggable can be dropped onto a Sortable list and then becomes part of it. Note: The helper option must be set to clone in order to work flawlessly.
`htmlDrag Me
`js
import { Draggable, Sortable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
connectToSortable: '#sort1'
});
new Sortable(document.querySelector('#sort1'));
`$3
Type:
String,Array
Default: null
Accepted values: parent, document, window, a CSS selector or an array of 4 numbers in the form [x1, y1, x2, y2]Constrains dragging to within the bounds of the specified element or region.
`html
Drag Me
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
containment: 'window'
});
new Draggable(document.querySelector('#drag2'), {
containment: [100, 100, 800, 800]
});
`$3
Type:
String
Default: null
Accepted values: any values accepted by the cursor CSS propertyAllows changing the cursor style while dragging the element.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
cursor: 'move'
});
`$3
Type:
Boolean
Default: falseDetermines whether the Draggable instance should be disabled.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
disabled: true
});
`$3
Type:
Number
Default: 0Distance in pixels that the mouse should move before the dragging should start. Prevents unwanted drags when the Draggable element is clicked.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
distance: 10
});
`$3
Type:
Array
Default: null
Accepted values: an array of 2 numbers in the form [x, y]Snaps the dragging helper to a grid, every x and y pixels.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
grid: [10, 10]
});
`$3
Type:
String
Default: null
Accepted values: a CSS selectorIf specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the Draggable element are permitted.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
handle: '.handle'
});
`$3
Type:
String,Function
Default: original
Accepted values: original, helper or a functionAllows for a helper element to be used for dragging display.
If set to
clone, then the element will be cloned and the clone will be dragged.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
helper: 'clone'
});
`$3
Type:
Number
Default: nullAllows changing the opacity of the element while being dragged.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
opacity: 0.5
});
`$3
Type:
Boolean,String,Function
Default: false
Accepted values: invalid, valid, true, false or a functionWhether the element should revert to its start position when dragging stops.
If set to
true, the element will always revert.
If set to invalid or valid it will respectively revert if dropped on a Droppable or not.
If it's a function, it must return true to indicate that the element should revert.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
revert: 'invalid'
});
`$3
Type:
Number
Default: 200Uses an animation with this specific duration in milliseconds when reverting the element.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
revert: 'invalid',
revertDuration: 500
});
`$3
Type:
String
Default: defaultUsed to group sets of Draggable, Droppable and Sortable elements, in addition to Droppable's
accept option. A Draggable with the same scope value as a Droppable will be accepted by it.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
scope: 'my-scope'
});
`$3
Type:
Boolean
Default: trueIf this option is set to
true, the container of the element will auto-scroll if needed.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
scroll: true
});
`$3
Type:
Number
Default: 20Determines how close to the edge of the viewport the auto-scroll should happen. Distance is realtive to the mouse pointer, not to the dragging element.
scroll is set to false.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
scroll: true,
scrollSensitivity: 50
});
`$3
Type:
Number
Default: 10The speed in pixels at which the container should auto-scroll when the distance in
scrollSensitivity is met.scroll is set to false.`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
scroll: true,
scrollSpeed: 20
});
`$3
Type:
String
Default: input, textarea, button, select, option
Accepted values: a CSS selectorPrevents dragging if the clicked element matches the given CSS selector.
`html
Don't Drag Me
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
skip: '.skip'
});
`$3
Type:
String
Default: null
Accepted values: a CSS selectorManages the z-indexes of Draggable elements matching the given CSS selector.
Brings the currently dragged element to the front compared with other members of the stack.
`html
Drag Me
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
stack: '.draggable'
});
new Draggable(document.querySelector('#drag2'), {
stack: '.draggable'
});
`$3
Type:
Number
Default: nullAllows to change the z-index of the element when being dragged.
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
zIndex: 1000
});
`$3
| Name | Description |
| :---------------------: | :---------------------------------------------------------------------------------: |
|
draggable:init | Called when the Draggable is initialized. |
| drag:start | Called when the drag operation is started. Can be canceled. |
| drag:move | Called while dragging the element. Can be canceled. |
| drag:stop | Called when the drag operation stops. Can be canceled, preventing an unwanted drop. |
| draggable:destroy | Called when the Draggable is destroyed. |$3
`html
Drag Me
``js
import { Draggable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), null, {
'drag:start': function (event) {
event.cancel();
}
});
`---
Droppable
Transforms elements into droppables or drop zones. This means that elements controlled by a
Draggable can be dropped into a Droppable if accepted by them.Elements modified or created will use the same CSS classes inherited from jQuery UI's implementation:
- ui-droppable: the droppable element
- ui-droppable-active: identifies an active droppable element
- ui-droppable-hover: used when the droppable has a draggable intersecting with it
$3
| Name | Type | Default | Description |
| :---------------------------: | :-----------------: | :---------: | :---------------------------------------------------------------: |
|
accept | {String,Function} | * | Controls which Draggable elements are accepted. |
| disabled | {Boolean} | null | Allows disabling the Droppable behaviour. |
| greedy | {Boolean} | false | How to handle dropping on nested Droppable elements. |
| scope | {String} | default | Used to group sets of Draggable, Droppable and Sortable elements. |
| tolerance | {String} | intersect | Intersection mode between Draggables and Droppables. |$3
Type:
String,Function
Default: *
Accepted values: a CSS selector or a functionControls which Draggable elements can be accepted by this Droppable.
It can be a CSS selector that needs to match the accepted Draggables or a function that receives each dragging element and returns true if the element is accepted.
`html
Drag Me
Drop Here
``js
import { Draggable, Droppable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'));
new Droppable(document.querySelector('#drop1'), {
accept: '#drag1'
});
`$3
Type:
Boolean
Default: falseAllows disabling the Droppable if set to
true.`html
Drag Me
Drop Here
``js
import { Draggable, Droppable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'));
new Droppable(document.querySelector('#drop1'), {
disabled: true
});
`$3
Type:
Boolean
Default: falseBy default, when an element is dropped on nested Droppables, each Droppable will receive the element. However, by setting this option to
true, any parent Droppables will not receive the element.`html
Drag Me
Drop Here
Or Drop Here
``js
import { Draggable, Droppable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'));
new Droppable(document.querySelector('#drop1'), {
accept: '#drag1'
});
new Droppable(document.querySelector('#drop2'), {
accept: '#drag1',
greedy: true
});
`$3
Type:
String
Default: defaultUsed to group sets of Draggable, Droppable and Sortable elements, in addition to the
accept option. A Droppable will only accept a Draggable of the same scope.`html
Drag Me
Drop Here
``js
import { Draggable, Droppable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'), {
scope: 'my-scope'
});
new Droppable(document.querySelector('#drop1'), {
scope: 'my-scope'
});
`$3
Type:
String
Default: intersect
Accepted values: fit, intersect, pointer or touchSpecifies which mode to use for testing whether a Draggable is hovering over a Droppable.
The
fit option requires the dragging element to overlap the droppable area entirely.
The intersect option requires the dragging element to overlap the droppable area at 50% in both directions.
The pointer requires the mouse pointer to overlap the droppable area.
The touch requires the dragging element to overlap the droppable area in any amount or direction.`html
Drag Me
Drop Here
``js
import { Draggable, Droppable } from 'agnostic-draggable';new Draggable(document.querySelector('#drag1'));
new Droppable(document.querySelector('#drop1'), {
disabled: true
});
`$3
| Name | Description |
| :------------------------: | :----------------------------------------------------------------------------: |
|
droppable:init | Called when the Droppable is initialized. |
| droppable:activate | Called when drag starts on a Draggable or Sortable accepted by the Droppable. |
| droppable:over | Called when a Draggable or Sortable item intersects with the Droppable. |
| droppable:drop | Called when a Draggable or Sortable item is dropped into the Droppable. |
| droppable:out | Called when a Draggable or Sortable item is dragged out of the Droppable area. |
| droppable:deactivate | Called when drag stops on a Draggable or Sortable accepted by the Droppable. |
| draggable:destry | Called when the Droppable is destroyed. |---
Sortable
Transforms elements that contains multiple child nodes in a way that these child nodes can be sorted by using the mouse.
Elements modified or created will use the same CSS classes inherited from jQuery UI's implementation:
- ui-sortable: the element containing the sortable elements
- ui-sortable-handle: the handle of each sortable item. By default, each sortable item is also a handle
- ui-sortable-helper: the element shown when dragging a sortable item
- ui-sortable-placeholder: the element used to show the future position of the item being dragged
> In order to use this component to sort table rows, the element passed should be the
tbody, not the table.$3
| Name | Type | Default | Description |
| :-------------------------------------------------: | :-------------------------: | :---------------------------------------: | :-----------------------------------------------------------------: |
|
appendTo | {String} | * | Where to append the sorting helper. |
| axis | {String} | null | Constraint sorting movement to an axis. |
| connectWith | {String} | null | Allows to connect to other Sortable instances. |
| containment | {String,Array} | null | Constraints sorting movement to an element or region. |
| cursor | {String} | null | Style for the cursor while sorting. |
| disabled | {Boolean} | false | Allows disabling the sorting behaviour. |
| distance | {Number} | 0 | Distance in pixels before sorting can start. |
| dropOnEmpty | {Boolean} | false | Whether items from this Sortable can be dropped on empty Sortables. |
| forceHelperSize | {Boolean} | false | Whether to force the sorting helper to have a size. |
| forcePlaceholderSize | {Boolean} | false | Whether to force the sorting placeholder to have a size. |
| grid | {Array} | * | Snaps the sorting helper to a grid, every x and y pixels. |
| handle | {String} | null | Sorting only starts if click matches this selector. |
| helper | {String,Function} | original | Configures the sorting helper node. |
| items | {String,Function} | null | Specifies which items should be sortable. |
| opacity | {Number} | null | Allows changing the opacity while sorting. |revert | {Boolean,String,Function} | false | Whether the sortable item should be reverted after sort stops. |revertDuration | {Number} | 200 | Duration in milliseconds of the revert animation. |scope | {String} | default | Used to group sets of draggable, droppable and sortable elements. |scroll | {Boolean} | true | Allows auto-scrolling within the container. |scrollSensitivity | {Number} | 20 | Scroll sensitivity in pixels. |scrollSpeed | {Number} | 10 | Scroll speed in pixels. |skip | {String} | input, textarea, button, select, option | Prevents sorting if this CSS selector is matched. |tolerance | {String} | intersect | Intersection mode between sortable items. |zIndex | {Number} | null | Allows changing the z-index while sorting. |Type: String
Default: parent
Accepted values: parent or a CSS selector
Which element the sorting helper should be appended to while sorting.
Only works when the helper option is set to not use the original element.
``html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
appendTo: 'body'
});
`
Type: String x
Default: null
Accepted values: or y
Constrains sorting to either the horizontal (x) or vertical (y) axis.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
axis: 'x'
});
`
Type: String
Default: null
Accepted values: a CSS selector
A selector of other Sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both Sortable elements.
`html`
Sort Me
Sort Me
Sort Me
Sort Me
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
connectWith: '#sort2'
});
`
Type: String,Array parent
Default: null
Accepted values: , document, window, a CSS selector or an array of 4 numbers in the form [x1, y1, x2, y2]
Constrains sorting to within the bounds of the specified element or region.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
containment: 'window'
});
`
Type: String cursor
Default: null
Accepted values: any values accepted by the CSS property
Allows changing the cursor style while sorting items.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
cursor: 'move'
});
`
Type: Boolean false
Default:
Determines whether the Sortable instance should be disabled.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
disabled: true
});
`
Type: Number 0
Default:
Distance in pixels that the mouse should move before the sorting should start. Prevents unwanted sorts when sortable items are clicked.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
distance: 10
});
`
Type: Boolean false
Default:
If false, items from this Sortable can't be dropped on an empty connected Sortable (see the connectWith option.
`html`
Sort Me
Sort Me
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
connectWith: '#sort2',
dropOnEmpty: true
});
`
Type: Boolean false
Default:
Whether to force the sorting helper to have a size.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
forceHelperSize: true
});
`
Type: Boolean false
Default:
Whether to force the sorting placeholder to have a size.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
forcePlaceholderSize: true
});
`
Type: Array [x, y]
Default: null
Accepted values: an array of 2 numbers in the form
Snaps the sorting helper to a grid, every x and y pixels.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
grid: [10, 10]
});
`
Type: String
Default: null
Accepted values: a CSS selector
If specified, restricts sorting from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the sortable items are permitted.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
handle: '.handle'
});
`
Type: String,Function original
Default: original
Accepted values: , helper or a function
Allows for a helper element to be used for sorting display.
If set to clone, then the item being sorted will be cloned and the clone will be dragged.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
helper: 'clone'
});
`
Type: String,Function
Default: null
Accepted values: a CSS selector or a function
Specifies how to find the sortable items. It can be provided as a CSS selector or a function returning an array of sortable nodes
> By default, all the direct descendants of the element will be considered sortable.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
items: 'div'
});
`
Type: Number
Default: null
Allows changing the opacity of the items while being sorted.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
opacity: 0.5
});
`
Type: Boolean,String,Function false
Default: invalid
Accepted values: , valid, true, false or a function
Whether the sortable item should revert to its start position when sorting stops.
If set to true, the sortable item will always revert.invalid
If set to or valid it will respectively revert if dropped on a droppable or not.true
If it's a function, it must return to indicate that the sortable item should revert.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
revert: 'invalid'
});
`
Type: Number 200
Default:
Uses an animation with this specific duration in milliseconds when reverting the items.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
revert: 'invalid',
revertDuration: 500
});
`
Type: String default
Default:
Used to group sets of Draggable, Droppable and Sortable elements, in addition to Droppable's accept option. A Sortable with the same scope value as a Droppable will be accepted by it.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
scope: 'my-scope'
});
`
Type: Boolean true
Default:
If this option is set to true, the container of the element will auto-scroll if needed.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
scroll: true
});
`
Type: Number 20
Default:
Determines how close to the edge of the viewport the auto-scroll should happen. Distance is realtive to the mouse pointer, not to the sorting item.
> This option is ignored if scroll is set to false.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
scroll: true,
scrollSensitivity: 50
});
`
Type: Number 10
Default:
The speed in pixels at which the container should auto-scroll when the distance in scrollSensitivity is met.
> This option is ignored if scroll is set to false.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
scroll: true,
scrollSpeed: 20
});
`
Type: String input, textarea, button, select, option
Default:
Accepted values: a CSS selector
Prevents sorting if the clicked element matches the given CSS selector.
`html`
Don't Sort Me
Sort Me
Don't Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
skip: '.skip'
});
`
Type: String intersect
Default: null
Accepted values: or pointer
Specifies which mode to use for testing whether the item being moved is hovering over another item.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
tolerance: 'pointer'
});
`
Type: Number
Default: null
Allows to change the z-index of the item when being sorted.
`html`
Sort Me
Sort Me
`js
import { Sortable } from 'agnostic-draggable';
new Sortable(document.querySelector('#sort1'), {
zIndex: 1000
});
`
| Name | Description |
| :-----------------------: | :----------------------------------------------------------------------------------------: |
| sortable:init | Called when the Sortable is initialized. |
| sortable:activate | Called when drag/sort starts on a connected Draggable or Sortable. |
| sort:start | Called when the sort operation is started. Can be canceled. |
| sort:move | Called while sorting an item. Can be canceled. |
| sort:stop | Called when the sort operation stops. Can be canceled to prevent an unwanted sort or drop. |
| sortable:over | Called when a connected Draggable or Sortable item intersects with the Sortable. |
| sortable:change | Called whenever the sort order is changed within a Sortable list. |
| sortable:remove | Called when an item is removed from a Sortable. |
| sortable:receive | Called when a new item (from a connected Draggable or Sortable) is received by a Sortable. |
| sortable:update | Called when the items of a Sortable were updated. |
| sortable:out | Called when a connected Draggable or Sortable item is dragged out of the Sortable area. |
| sortable:deactivate | Called when drag/sort stops on a connected Draggable or Sortable. |
| sortable:destroy` | Called when the Sortable is destroyed. |
Feel free to submit pull requests.
The most wanted help would be bringing the remaining features from jQuery UI's that were not translated to this library.
However, other new features and fixes for any kind of defects are very welcome.