Accessible Drag’n’drop List Reordering Library – Dragon Drop

Preview:

Description:

Dragon Drop is a fast, accessible drag’n’drop library that enables users to reorder items in a list according to their preferences or priorities.

Keyboard Interactions:

• Enter & Space: Enter the sortable mode
• Up & Down arrows: Move the current item up or down
• ESC: Exit the sortable mode

How to use it:

1. Install and import the Dragon Drop.

# NPM
$ npm i drag-on-drop

import DragonDrop from 'drag-on-drop';

// Browser
<script src="/dist/dragon-drop.min.js"></script>

2. Create new instance of the Dragon Drop and specify the selector of the target list.

var myList = new DragonDrop(document.getElementById('myList'), {
    // options here
});

3. Add a drag handle to each list item.

<ul id="myList">
  <li>
    <button class="handle" aria-label="Reorder">
      Reorder
    </button>
    <span>Item 2</span>
  </li>
  <li>
    <button class="handle" aria-label="Reorder">
      Reorder
    </button>
    <span>Item 2</span>
  </li>
  ...
</ol>

var myList = new DragonDrop(document.getElementById('myList'), {
    handle: '.handle',
});

4. Available options.

• item: The selector for the drag items (qualified within container). Defaults to `’li’`.
• handle: The selector for the handle. If set to false, the entire item will be used as the draggable region. Defaults to `’button’`.
• activeClass: The class to be added to the item being dragged. Defaults to `’dragon-active’`.
• inactiveClass: The class to be added to all of the other items when an item is being dragged. Defaults to `’dragon-inactive’`.
• annnouncement: The configuration object for live region announcements
• announcement.grabbed: The function called when an item is picked up. The currently grabbed element along with an array of all items are passed as arguments respectively. The function should return a string of text to be announced in the live region.
• announcement.dropped: The function called with an item is dropped. The newly dropped item along with an array of items are passed as arguments respectively. The function should return a string of text to be announced in the live region.
• announcement.reorder: The function called when the list has been reordered. The newly dropped item along with an array of items are passed as arguments respectively. The function should return a string of text to be announced in the live region.
• announcement.cancel: The function called when the reorder is cancelled (via ESC). No arguments passed in.
• liveRegion.ariaLive: Optional ariaLive attribute to be passed to the live region. Valid values are “off”, “polite”, or “assertive”. Default is “assertive”.
• liveRegion.ariaRelevant: Optional ariaRelevant attribute to be passed to the live region. Valid values are “additions”, “removals”, “text”, and “all”. Default is “additions”.
• liveRegion.ariaAtomic: Optional ariaAtomic attribute to be passed to the live region. Default is “true”.

var myList = new DragonDrop(document.getElementById('myList'), {
    item: 'li',
    handle: 'button',
    activeClass: 'dragon-active',
    inactiveClass: 'dragon-inactive',
    announcement: {
      grabbed: el => `Item ${el.innerText} grabbed`,
      dropped: el => `Item ${el.innerText} dropped`,
      reorder: (el, items) => {
        const pos = items.indexOf(el) + 1;
        const text = el.innerText;
        return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`;
      },
      cancel: 'Reordering cancelled'
    }
});

5. Available props.

// an array of sortable items
myList.items
// an array of handle items
myList.handles
// direct handle on the dragula instance
myList.dragula

6. Event handlers.

dragonDrop.on('grabbed', function(container, item){
  // ...
})
dragonDrop.on('dropped', function(container, item){
  // ...
})
dragonDrop.on('reorder', function(container, item){
  // ...
})
dragonDrop.on('cancel', function(e){
  // ...
})