Drag and Drop

Drag-and-Drop

This is part of a series of articles describing aspects of how I've come to use Mithril. This is not a basic Mithril tutorial -- for that please see this excellent introduction.

Table of Contents

• Table of Contents
• Introduction
• Drag-and-Drop Strategy
• Drag-and-Drop Libraries
  • Dragula
  • RubaXa/Sortable

Introduction

In this article we'll look into using drag-and-drop with Mithril. Specifically we'll look to find or to develop a repeatable technique for implementing drag-and-drop. We'll be building on our BELAS app structure, so please read that article if you haven't already.

Examples I've come across of drag-and-drop in Mithril are:

• in the "awesome-Mithril" repo
• in Leo Horie's Mithril blog: Drag-n-drop file uploads
• in random JSBin-type snippets

The first 2 of those directly program to HTML5 drag-and-drop functions; the 3rd simulate drag-and-drop using pre-HTML5 mousedown/mousemove-type code to capture/position an element.

Unlike what we could do with UI Animation, for drag-and-drop existing art looks to be the way to go. Except we find good libraries to do the heavy lifting for us.

Drag-and-Drop Strategy

Drag-and-drop is fiddly business: it needs to account for existing CSS-positioning of the dragged item, it needs to provide many visual cues during drag (proxy-the-drag-item, possibly-copy-on-drag, can-drop, cannot-drop, drop-here-but-not-there, ad nauseum), and then it needs to perform just as many actions at the end of the drag (drop-into-new-site, revert-to-old-site, only-remove-from-old-site, etc, etc). Given that, right now I'm hardly enthused to try implement it ourselves, or even to implement virtual-drag-and-drop à la "vanimation".

Thus our drag-and-drop strategy is: there is no strategy -- just find a good library, figure out how to work with it.

Drag-and-Drop Libraries

In this section we'll consider specific drag-and-drop libraries:

Dragula

Dragula, noted to work with "every sane browser and IE7+" advertises "Drag and drop so simple it hurts". For examples of using it with Mithril, see Dragula

RubaXa/Sortable

https://github.com/RubaXa/Sortable (TBD)