Touch-enabled Draggable & Sortable JavaScript Library – AreaSortable.js

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();}
});