Author: | foo123 |
---|---|
Views Total: | 815 views |
Official Page: | Go to website |
Last Update: | February 21, 2022 |
License: | MIT |
Preview:

Description:
AreaSortable.js is a simple, mobile-compatible JavaScript library that allows you to resort items inside a container through mouse/touch drag and drop.
How to use it:
1. Import the area-sortable.js library.
<script src="./src/areasortable.js"></script>
2. Add the CSS class dnd-sortable-item
to the sortable elements.
<ul id="example" class="container"> <li id="A1" class="dnd-sortable-item">A</li> <li id="B1" class="dnd-sortable-item">B</li> <li id="C1" class="dnd-sortable-item">C</li> <li id="D1" class="dnd-sortable-item">D</li> <li id="E1" class="dnd-sortable-item">E</li> </ul>
3. Add the CSS class dnd-sortable-handle
to the drag handles.
<ul id="example" class="container"> <li id="A1" class="dnd-sortable-item dnd-sortable-handle">A</li> <li id="B1" class="dnd-sortable-item dnd-sortable-handle">B</li> <li id="C1" class="dnd-sortable-item dnd-sortable-handle">C</li> <li id="D1" class="dnd-sortable-item dnd-sortable-handle">D</li> <li id="E1" class="dnd-sortable-item dnd-sortable-handle">E</li> </ul>
4. Initialize the AreaSortable on the parent container and determine the sort direction: ‘vertical’, ‘horizontal’, or ‘unrestricted’.
let demo = AreaSortable('vertical', { container: 'example' });
5. Override the default CSS selectors.
let demo = AreaSortable('vertical', { container: 'example', activeArea: 'dnd-sortable-area', handle: 'dnd-sortable-handle', item: 'dnd-sortable-item', placeholder: 'dnd-sortable-placeholder', activeItem: 'dnd-sortable-dragged', closestItem: 'dnd-sortable-closest', });
6. Set the animation speed. Default: 0.
let demo = AreaSortable('vertical', { container: 'example', animationMs: 180, });
7. Determine whether to enable automatic scrolling when the sortable area is partially hidden. Default: false.
let demo = AreaSortable('vertical', { container: 'example', autoscroll: true, });
8. Determine how to handle draggable items using the itemFilter
function.
let demo = AreaSortable('vertical', { container: 'example', itemFilter: function(item){return item;}, });
9. Callbacks.
let demo = AreaSortable('vertical', { container: 'example', onStart: function(item){disableScroll();}, onEnd: function(item){enableScroll();} });