Understanding Dragula.js (Drag-n-Drop library) events

Dragula.js is a JavaScript library that helps you add drag and drop feature to your web application. A few days ago, I had a chance to use Dragula.js in an Angular environment to achieve multi-select, drag-and-drop feature. At that time, I was searching for a visual representation for Dragula.js events and didn’t find a compelling one. So, I decided to create one.

How did I develop the visual representation for Dragula.js events?

Fig.1. Setup for developing the visual representation of Dragula.js events

• Using a simple scenario with 4 containers and 1 list element as depicted in figure 1 above.
• Containers: Sydney, Melbourne, Perth, and Brisbane
• List Element: Rin
• Logging messages from the event handlers for the events exposed by Dragula.js (accessible through drake).
• Setting breakpoints in Dragula.js code (emit()).
• Keep the timestamps on in the Chrome Developer Console.
• Moving the list element horizontally and vertically among containers.

How does the visual representation of the event sequence look like?

Fig.2. Visual representation of Dragula.js event sequence

• All successful or failed drag-n-drop operations start with a DRAG event. So, it is always the first event in the sequence of events.
• Right after DRAG event, CLONE event is fired. It is always the second event in the sequence.

Fig.3. Event sequence for typical successful drag and drop operation

Fig.4. Event sequence for typical failed drag and drop operation

• Number 3 is not completely predictable as the events within this box can be fired multiple times and in any sequence. Considering the example of moving from Sydney to Melbourne, the typical successful scenario should look like figure 3. The typical failed scenario should look like figure 4.
• Number 4 is the CANCEL, DROP, or REMOVE. REMOVE occurs depending on the values of ‘copy’ and ‘removeOnSpill’ options. CANCEL and DROP are the usual occurrences.
• DRAGEND is the last event, and it is fired for all operations irrespective of their outcomes.
• One interesting observation is that an OUT event is fired right before DRAGEND for all operations irrespective of their outcome. This event is the one with brown background in figure 2.

I think this kind of visual representation makes it easy to understand software and makes it easy to catch and fix bugs upfront.