ractive.drag.drop.js

Native HTML5 Drag N' Drop ractive event definition.

Usage

After including ractive and ractive.drag.drop.js:

Template

<ul proxy-dragndrop='dragndrop-items'>
  {{#items:i}}
    <li>{{items[i]}}</li>
  {{/items}}
</ul>

Code

Ractive Boilerplate

ractive = new Ractive({
  el: containerElement,
  template: templateElement,
  data: {
    items: [
      'One', 'Two', 'Three'
    ]
  }
});

Now any drag / drop action can be caught:

ractive.on('dragndrop-items', function (event) {
  console.log(event);
});