mithril-dnd v1.1.3

Simple Mithril Drag and Drop

Should work with Mithril v1 and 2.

Demo

Usage

Make a DND list where drag and drop should occur:

var DND = require('mithril-dnd');

m(DND.view, {list: [your array data here], template: function(data) {
        return m('.item', data.name);
        }
        }
 );

Include the mirror div somewhere in your page (preferably at the bottom):

m(DND.mirror);

Also include mdnd.css.

Event Listeners

You can listen to events for drag start, dragging and dropping. The listener will return back the event and a data object with the following format:

{element: {
target: (dragged DOM element),
            from: (dragged list DOM element),
            to: (dropped list DOM element, if there is one)
          }, data: {
target: (dragged item from the list),
            from: {index: (dragged index in the list), columnIndex: (dragged list index)},
            to: {index: (dropped index in the list), columnIndex: (dropped list index)}
          }
}

All the listeners will provide data for the dragged items, but onDragging and onDrag may not have a dropped item.

Options

You can provide other attributes to a DND list for greater configurability: