Grabetha is a fairly raw grab and drop library to help solve the grabbing and dropping of UI's that are based on data.
That said, a UI does not need to be data-driven for grabetha to work.
npm install grabetha.
var grabetha = require'grabetha';
Create a grabbable set:
var grabbableStuff = grabethagrabbable'.things .stuff';
Assign handlers to the set:
grabbableStuffon'grab'// 'grab' gets raised once when a grabbable item is grabbed.// you can put stuff on the grabbableStuff object that is passed in,// as it lives throughout the lifecycle of the interaction.// the grabbableStuff object is also passed to any droppable instances// that it is hovered over or dropped onto.// Use the ghost helper to easily create// a ghost version of the thing you are grabbing.thisghost = thiscreateGhost;// Listen to move eventsgrabon'move'// a 'move' is raised every mousemove or touchmove//Do something;// Listen to the dropon'drop'// a drop is raised on mouseup or touchend// Cleanup the ghost.thisghostdestroy;thisghost = null;
Create a droppable set:
var dropArea = grabethadroppable'.majigger';
dropAreaon'hover'// the droppable element it is overeventtaget;// the grabbale instance that is over it.eventgrabbable;// the location of the grabeventposition;on'drop'// the same stuff as above is accessable here.console.logevent;;