node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »




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.

Require grabetha:

var grabetha = require('grabetha');

Create a grabbable set:

grabetha.grabbable(element or selector)

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 = null

Create a droppable set:

grabetha.droppable(element or selector)

var dropArea = grabetha.droppable('.majigger');

Assign handlers

dropArea.on('hover', function(event){
    // the droppable element it is over 
    // the grabbale instance that is over it. 
    // the location of the grab 
.on('drop', function(event){
    // the same stuff as above is accessable here.