A JS Library for Drag and Drop, supports Sortable and Draggable
Usage
HTML
<ul id="group">
<li>
<i>drag me</i>
<p>1</p>
</li>
<li>
<i>drag me</i>
<p>2</p>
</li>
<li>
<i>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) => {
return e.target.tagName === 'I' ? true : false
},
dragging: (e) => {
return e.target
},
dragEnd: (old, new) => {
...
}
}
)
The component you created will clear all state after destroyed
Options
option | type | default | Description |
---|
draggable | String/Function | - | Specifies which items inside the element should be draggable, the function type must return a boolean |
dragging | Function | (e) => e.target | Specifies the drag and drop element, which must return an HTMLElement |
dragEnd | Function | (pre, cur) => {} | The callback function when the drag is completed |
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 |
animation | Number | 150 | animation delay |
Methods
method | Description |
---|
destroy() | Manually clear all the state of the component, using this method the component will not be draggable |