Skip to content

Animated drag sorting for horizontal list items

License

Notifications You must be signed in to change notification settings

RelationalAI-oss/dragsort

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dragSort - lightweight HTML5 drag-&-drop sorting

drag-sort demo

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

About

Animated drag sorting for horizontal list items

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.9%
  • CSS 4.1%