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.
Usage:
npm install grabetha.
Require grabetha:
var grabetha = require('grabetha');
Create a grabbable set:
var grabbableStuff = grabetha.grabbable('.things .stuff');
Assign handlers to the set:
grabbableStuff.on('grab', function(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.
this.ghost = this.createGhost();
// Listen to move events
grab.on('move', function(){
// a 'move' is raised every mousemove or touchmove
//Do something
});
})
// Listen to the drop
.on('drop', function(position){
// a drop is raised on mouseup or touchend
// Cleanup the ghost.
this.ghost.destroy();
this.ghost = null
});
Create a droppable set:
var dropArea = grabetha.droppable('.majigger');
Assign handlers
dropArea.on('hover', function(event){
// the droppable element it is over
event.taget;
// the grabbale instance that is over it.
event.grabbable;
// the location of the grab
event.position;
})
.on('drop', function(event){
// the same stuff as above is accessable here.
console.log(event);
});