Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 971 Bytes

Readme.md

File metadata and controls

43 lines (28 loc) · 971 Bytes

dragdrop

simple drag and drop component

Installation

$ component install ecarter/dragdrop

Features

  • dead simple drag and drop event handling
  • auto-binds to all draggable="true" children elements
  • adds dragging and over classes for element styling
  • no jquery dependency 👍

Events

  • start (el) on drag start
  • enter (el) when drag enters draggable target
  • over (el) when drag is over target
  • leave (el) when drag leaves target
  • end (el) when drag event ends
  • drop (drag, drop) when drag to drop completes

Examples

Drag a element and replace it with another:

  var draggable = Dragdrop(el);

  draggable.on('drop', function(drag, drop){
    var dragged = drag.cloneNode(true);
    var dropped = drop.cloneNode(true);
    list.replaceChild(dragged, drop);
    list.replaceChild(dropped, drag);

    console.log('dropped element', drag, 'to element', drop);
  });

License

MIT