A JS Library for Drag and Drop, supports Sortable and Draggable
Usage
HTML
<ul id="group">
<li>
<i class="drag">drag me</i>
<p>1</p>
</li>
<li>
<i class="drag">drag me</i>
<p>2</p>
</li>
<li>
<i class="drag">drag me</i>
<p>3</p>
</li>
</ul>
JavaScript
import Sortable from 'sortable-dnd'
var DND = new Sortable(
document.getElementById('group'),
{
chosenClass: 'chosen',
draggable: (e) => e.target.tagName === 'I' ? true : false,
onDrag: ({ from, event, originalEvent }) => {
},
onMove: ({ from, ghostEl, event, originalEvent }) => {
},
onDrop: ({ from, to, changed, event, originalEvent }) => {
},
onAdd: ({ from, to, event, originalEvent }) => {
},
onRemove: ({ from, to, event, originalEvent }) => {
},
onChange: ({ from, to, event, originalEvent }) => {
},
onSelect: ({ group, target, event, originalEvent }) => {
},
onDeselect: ({ group, target, event, originalEvent }) => {
}
}
)
Methods
Method | Description |
---|
destroy() | Manually clear all the state of the component, using this method the component will not be draggable |
Options
Common used
Option | Type | Default | Description |
---|
draggable | String/Function | - | Specifies which items inside the element should be draggable |
group | String/Object | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false } |
multiple | Boolean | false | Enable multiple drag |
animation | Number | 150 | Animation speed moving items when sorting |
onDrag | Function | - | The callback function when the drag is started |
onMove | Function | - | The callback function when the dragged element is moving |
onDrop | Function | - | The callback function when the drag is completed |
onAdd | Function | - | The callback function when element is dropped into the list from another list |
onRemove | Function | - | The callback function when element is removed from the list into another list |
onChange | Function | - | The callback function when the dragged element changes position in the list |
onSelect | Function | - | The callback function when element is selected |
onDeselect | Function | - | The callback function when element is unselected |
Others
Option | Type | Default | Description |
---|
disabled | Boolean | false | Disables the sortable if set to true |
chosenClass | String | '' | The class of the selected element when dragging |
selectedClass | String | '' | Class name for selected item |
ghostStyle | Object | {} | The style of the mask element when dragging |
ghostClass | String | '' | The class of the mask element when dragging |
autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container, for browsers that do not support HTML5 drag events |
scrollStep | Number | 5 | The distance to scroll each frame when autoscrolling |
scrollThreshold | Number | 15 | Threshold to trigger autoscroll |
delay | Number | 0 | time in milliseconds to define when the sorting should start |
delayOnTouchOnly | Boolean | false | only delay if user is using touch |
fallbackOnBody | Boolean | false | Appends the cloned DOM Element into the Document's Body |
forceFallback | Boolean | false | true: ignore the HTML5 DnD behaviour and force the fallback to kick in |
stopPropagation | Boolean | false | The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |
LICENSE
MIT