@yaireo/dragsort

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>drag & drop</li>
    <li>items</li>
    <li>easily</li>
    <li>with this</li>
    <li>super lightweight script</li>
</ul>

javascript

import DragSort from '@yaireo/dragsort'
import '@yaireo/dragsort/dist/dragsort.css'

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

Note - useful class names 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.dragStart	Function		callback function when dragging started. Arguments are (element, event)
callbacks.dragEnd	Function		callback function when dragging finished. Arguments are (element, event)