DragonDrop

Introduction

DragonDrop is an accessible drag and drop library. It allows us to create dynamic drag and drop UI's with ease, while being accessible. I am really excited by this project and would like to give you a quick introduction to how to get setup and how to configure the module.

Setup

To install the DragonDrop package, we will use npm - the node package manager.

npm i drag-on-drop -S

Once this is done, we have 2 ways to link the file to our project. The first way is to link via a script tag, like so:

<script src="/node_modules/drag-on-drop/dist/dragon-drop.min.js"></script>

However, I personally prefer to link it as an ES6 module. This is the easiest thing in projects I work with and fits well into a normal build process such as webpack or gulp. To use the module as an import, add the following in the relevant javascript file for your use case.

import DragonDrop from 'drag-on-drop';

The code will be the same no matter which way you choose and there will be no difference if you choose to do the script tag method or the import method. Just remember to compile your code using something like webpack if you need to support older browsers that don't support imports. Also, remember that you should link your script as a module if you do not compile first, as this is done by adding the type="module" attribute to your script tag, for example:

<script src="/dist/index.js" type="module"></script>

The DragonDrop class

The DragonDrop class is instantiated as follows:

new DragonDrop(container, options);

The DragonDrop constructor takes two parameters. The first is the container of the items you wish to be draggable and droppable. The second parameter is the configurable options you wish to apply to DragonDrop which we will see in the next section.

default options

The defaults are set as follows:

const options = {
  item: 'li', // qualified within container
  handle: 'button', // qualified within `item`
  activeClass: 'dragon-active', // added to item being dragged
  inactiveClass: 'dragon-inactive', // added to other items when item is being dragged
  nested: false, // if true, stops propagation on keydown / click events
  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'
  }
};

item

This is the CSS selector of the draggable items in the container.

handle

This is the CSS selector of the item used to activate the drag and drop behaviour. If this is set to false, the whole item will be draggable.

activeClass

This is the class added to the item during dragging/selection.

inactiveClass

This is the class added to the item during dropping/deselection.

announcement

This is how we configure what is read to users using assistive technology such as a screen reader or braille machine.

grabbed

This is fired when an item within the container is grabbed

dropped

This is fired when an item within the container is dropped

reorder

This is fired when an item within the container is moved to a new location in the container

cancel

This is fired when an item within the container is grabbed but not moved when dropped or when grabbed via keyboard interaction and the escape key is pressed

An example setup

An example simple setup could be like so:

import DragonDrop from 'drag-on-drop';

/** 
* Note: '.dnd__list' is a <ul></ul> in my html page
* Note: The 'dnd' in the class name is short for DragonDrop
**/

const container = document.querySelector('.dnd__list');
const options = {
  item: 'li',
  handle: false,
  activeClass: 'dnd__active',
  inactiveClass: 'dnd__inactive'
};
new DragonDrop(container, options);

Breaking that down

• We have selected a DragonDrop container which has a custom class on it
• Each <li></li> in the list is a draggable item since there is no handle set
• There is a custom class for when an item is being dragged, in motion or dropped that we can use to style the item

Easy, right?

Conclusions

This is a really cool project and the fact is is an accessible inplementation if used right, it is a great tool to know and use when the need arises. Check out the DragonDrop Repository on Github if you want to learn more.

If you want me to write more in depth information on the project or to write up some examples, feel free to let me know and I will see what I can do!

Comments

[Drew Bragg]

This is fantastic! I love the focus on accessibility. Nice work!

[James Robb]

Thanks, glad you are liking the content!