Dragoned
Dragoned.js is a library for drag-and-drop lists with different sizes of height
Features
- Supports touch devices with touch events.
- Can drag from one list to another.
- Smart auto-scrolling on any device.
- Easy to set up, plug & play!
Examples
Install
You can install it on npm.
npm install dragoned --save
Usage
<ul id="container">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul> new Dragoned(document.querySelector('#container'));Options
new Dragoned(container,{
group:"group-name",
sort: true,
draggable:"query-selector", // which element inside the container should be draggable.
handle:"handle-element", // Drag handle selector within list items.
clone:true, // Clone the item.
delay: 100 // time in milliseconds to start.
onStart:({item, from, oldIndex})=>{
},
// on move an item in the list or between lists
onMove:({item, from, to, newIndex, oldIndex})=>{
},
// on dragging ended
onEnd:({item, from, to, newIndex, oldIndex})=>{
},
// on creating a clone of element
onClone:({item, from, oldIndex}) =>{
}
});Contributing
All contributions are super welcome!