nyayan / dragsort

Animated drag sorting for horizontal list items

dragSort - lightweight HTML5 drag-&-drop sorting

Installation

npm i @yaireo/dragsort --save

Pre-setup suggestions:

• Set box-sizing: border-box on the list or its children is a good idea
• Use the provided stylesheet in this package - dist/dragsort.css

Usage

HTML

<ul class="list">
    <li>A</li>
    <li>BBBBB</li>
    <li>CCCCCCCCC</li>
    <li>DDDD DDDDDDDD</li>
    <li>EE</li>
</ul>

javascript

var listElm = document.querySelector('.list')
var dragSort = new DragSort(listElm)

Useful classes are set on elements being dragged.

Settings

Name	Type	Default	Info
selector	String	all child nodes of first parameter	which elements should be draggable
mode	String		Use "vertical" for vertical-lists re-ordering
callbacks.dragEnd	Function		callback function when finished dragging. The dropped element is the only argument