A JS Library for Drag and Drop, supports Sortable and Draggable
HTML
<ul id="group">
<li class="item">
<i id="handle" class="handle">drag me</i>
<p>1</p>
</li>
<li class="item">
<i id="handle" class="handle">drag me</i>
<p>2</p>
</li>
<li class="item">
<i id="handle" class="handle">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 === 'LI' ? true : false, // use function
// draggable: 'li' // use tagName
// draggable: '.item' // use class
// draggable: '#item' // use id
// draggable: (e) => e.target // use function to set drag Element
handle: (e) => e.target.tagName === 'I' ? true : false, // use function
// handle: 'I', // use tagName
// handle: '.handle', // use class
// handle: '#handle', // use id
onDrag: ({ from, event }) => {
// code
},
onMove: ({ from, event }) => {
// code
},
onDrop: ({ from, to, changed, event }) => {
// code
},
onAdd: ({ from, to, event }) => {
// code
},
onRemove: ({ from, to, event }) => {
// code
},
onChange: ({ from, to, event }) => {
// code
},
onSelect: (params) => {
// code
},
onDeselect: (params) => {
// code
}
}
)
Method | Description |
---|---|
destroy() |
Manually clear all the state of the component, using this method the component will not be draggable |
option(key, value?) |
Get or set the option value, depending on whether the value is passed in |
Common used
Option | Type | Default | Description |
---|---|---|---|
draggable |
String/Function |
- |
Specifies which items inside the element should be draggable |
handle |
String/Funnction |
- |
Drag handle selector within list items |
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 |
'' |
Class name for the dragging item |
selectedClass |
String |
'' |
The class of the element when it is selected, it is usually used when multiple drag |
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 |
scrollThreshold |
Number |
55 |
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 |
stopPropagation |
Boolean |
false |
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |
swapOnDrop |
Boolean |
true |
When the value is false, the dragged element will return to the starting position of the drag |