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 usenpm - 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:

<scriptsrc="/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.

importDragonDropfrom'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:

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

The DragonDrop class

The DragonDrop class is instantiated as follows:

newDragonDrop(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:

constoptions={item:'li',// qualified within containerhandle:'button',// qualified within `item`activeClass:'dragon-active',// added to item being draggedinactiveClass:'dragon-inactive',// added to other items when item is being draggednested:false,// if true, stops propagation on keydown / click eventsannouncement:{grabbed:el=>`Item${el.innerText} grabbed`,dropped:el=>`Item${el.innerText} dropped`,reorder:(el,items)=>{constpos=items.indexOf(el)+1;consttext=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 tofalse, the wholeitem 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:

importDragonDropfrom'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**/constcontainer=document.querySelector('.dnd__list');constoptions={item:'li',handle:false,activeClass:'dnd__active',inactiveClass:'dnd__inactive'};newDragonDrop(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 theitem

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 theDragonDrop 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!