Skip to content
A JavaScript micro-framework for adding drag-and-drop functionality to elements for advanced UI development
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Makefile
drag-drop.js
drag-drop.min.js
jquery.dragdrop.js
license.txt
readme.textile
test.html

readme.textile

DragDrop

A JavaScript micro-framework for adding drag-and-drop functionality to elements for advanced UI development

Author: James Brumond
Version: 0.2.3-beta

Copyright 2011 James Brumond
Dual licensed under MIT and GPL

Notice

The change to version 0.2.1-beta is NOT backwards compatible. Make sure to look over the samples below.

Features

  • Simple and intuitive interface
  • Option to seperate the event target from the dragged element
  • Bindable dragstart/drag/dragend events
  • Option to define bounding boxes (new in version 0.2.1-beta)
  • Very lightweight (only 1.8kb minified and gzipped)

Samples! :)

// Make myElement drag-and-drop enabled
DragDrop.bind(myElement);

// A more complex version
var draggable = DragDrop.bind(myElement, {
    // The anchor; myElement moves when anotherElement is dragged
    anchor: anotherElement,
    // The draggable element will now stay bound within it's offsetParent
    boundingBox: 'offsetParent',
    // Define a dragstart event
    dragstart: function(evt) {
        // ...
    }
});

// Change the bounding box to some manual positions
draggable.setBoundingBox({
    x: { min: 0, max: 600 },
    y: { min: 0, max: 400 }
});

// Define a new dragend event
draggable.bindEvent('dragend', function(evt) {
    // ...
});

// This is how you would remove a drag event (if one were defined above)
draggable.unbindEvent('drag', theBoundDragEventFunction);
You can’t perform that action at this time.