This repository is a mirror of the component module jh3y/draggable. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/jh3y-draggable. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.

Make an element draggable with configurable behaviours. Compatible with component package manager.

A simple demo of making a draggable div can be seen here.

##usage Use with or without component package manager. Examples of all behaviours can be seen in the demo or in the example page. ###use with component package manager ####installation Install with component(1):

$ component install jh3y/draggable

###use simply create an element and then make it a draggable

var draggable = require('draggable');//ONLY REQUIRED IF USING COMPONENT PACKAGE MANAGER
var element = document.querySelector('.myDraggable');
element.style.height = '50px';
element.style.width = '50px';
element.style.background = 'red';
var myDrag = new draggable(element);

an example of passing in options for pens:

var myPennedDrag = new draggable(element, {
	pens: document.querySelector('.pen')
});

###use without component package manager simply include the standalone version of draggable and create a new draggable from an element

var element = document.querySelector('.myDraggable');
element.style.height = '50px';
element.style.width = '50px';
element.style.background = 'red';
var myDrag = new draggable(element);

an example of passing in options for pens:

var myPennedDrag = new draggable(element, {
	pens: document.querySelector('.pen')
});

draggable is really simple to use and the following methods and options are available ###options

####pens: NodeList/array of elements define elements that a draggable will snap into. ####roam: true/false [default: true] defines whether a draggable can be dragged out of pens or whether it must always be contained within one of its defined pens. ####contained: true/false [default: false] defines whether a draggable can be dragged outside of its parent or not. ####vertical: true/false [default: true] defines whether a draggable can be dragged vertically. ####horizontal: true/false [default: true] defines whether a draggable can be dragged horizontally. ####ghosting: true/false [default: false] define whether draggable has ghosting effect (see demo).

###methods There are also some methods you can use on your draggable: ####setPens(NodeList - array of elements) set pen elements for draggable to snap to. ####setContained(bool) set whether a draggable is contained. ####setRoam(bool) set whether a draggable can roam outside of pens. ####setVertical(bool) set whether a draggable can be dragged vertically. ####setHorizontal(bool) set whether a draggable can be dragged horizontally. ####setGhosting(bool) set whether a draggable has the ghosting effect.

MIT