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!
Top comments (2)
This is fantastic! I love the focus on accessibility. Nice work!
Thanks, glad you are liking the content!