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,
dragging: (e) => {
return e.target.parentNode
},
onDrag: (dragEl, event, originalEvent) => {
},
onMove: (from, ghostEl, event, originalEvent) => {
},
onDrop: (changed, event) => {
},
onChange: (from, to, event, originalEvent) => {
}
}
)
The component you created will clear all state after destroyed
Options
option | type | default | Description |
---|
disabled | Boolean | false | Disables the sortable if set to true |
draggable | String/Function | undefined | Specifies which items inside the element should be draggable, the function type must return a boolean |
dragging | Function | undefined | Specifies the element witch you want to drag: (e) => return e.target |
onDrag | Function | undefined | The callback function when the drag is started:
(dragEl, event, originalEvent) => {} |
onMove | Function | undefined | The callback function when the dragged element is moving: (from, ghostEl, event, originalEvent) => {} |
onDrop | Function | undefined | The callback function when the drag is completed: (changed, originalEvent) => {} |
onChange | Function | undefined | The callback function when the dragged element changes position: (from, to, event, originalEvent) => {} |
ghostStyle | Object | {} | The style of the mask element when dragging |
ghostClass | String | '' | The class of the mask element when dragging |
chosenClass | String | {} | The class of the selected element when dragging |
delay | Number | 0 | time in milliseconds to define when the sorting should start |
delayOnTouchOnly | Boolean | false | only delay if user is using touch |
animation | Number | 150 | Animation speed moving items when sorting |
ghostAnimation | Number | 0 | Ghost element animation delay before destroyed |
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 |
Methods
method | Description |
---|
destroy() | Manually clear all the state of the component, using this method the component will not be draggable |