dragoned

Another Sortable library but with the line

Usage no npm install needed!

<script type="module">
  import dragoned from 'https://cdn.skypack.dev/dragoned';
</script>

README

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!

Got questions? click here.