https://github.com/yaireo/dragsort
Animated drag sorting for horizontal list items
https://github.com/yaireo/dragsort
drag-and-drop javascript sort sorting
Last synced: about 1 year ago
JSON representation
Animated drag sorting for horizontal list items
- Host: GitHub
- URL: https://github.com/yaireo/dragsort
- Owner: yairEO
- License: mit
- Created: 2018-12-12T11:06:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-16T13:02:07.000Z (about 2 years ago)
- Last Synced: 2025-04-15T06:09:26.339Z (about 1 year ago)
- Topics: drag-and-drop, javascript, sort, sorting
- Language: JavaScript
- Size: 1.43 MB
- Stars: 32
- Watchers: 3
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
DragSort
lightweight HTML5 drag-&-drop sorting
## Installation
```sh
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
```html
- drag & drop
- items
- easily
- with this
- super lightweight script
```
#### javascript
```js
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)`