Skip to main content


Draggable.create( target:Object, vars:Object ) : Array

[static] A more flexible way to create Draggable instances than the constructor (new Draggable(...)).


  • target: Object

    The element that should be draggable; this can be a regular DOM element or a jQuery object or an array of elements. For example, document.getElementById("yourID") or $("#yourID") or "#yourID" or [element1, element2, element3].

  • vars: Object

    An object containing optional configuration data like {type: "x,y", inertia: true, edgeResistance: 0.8, onDrag: yourFunction}.

Returns : Array

An array of Draggable instances (one for each element).


Provides a more flexible way to create Draggable instances than the constructor (new Draggable(...)) because the Draggable.create() method can accommodate multiple elements (either as an array of elements or a jQuery object with many results) or even selector text like ".yourClass". Draggable.create() always returns an array of Draggable instances, one for each element. Remember an individual Draggable instance can only be associated with a single element - that's why Draggable.create() creates one for each element and spits back an array.

Any of the following are valid:

//a regular DOM elementDraggable.create(document.getElementById("yourID"), {type: "x,y"});//or a jQuery objectDraggable.create( $(".yourClass"), {type: "x,y"});//or selector textDraggable.create("#yourID", {type: "x,y"});//or an array of elementsDraggable.create([element1, element2, element3], {type: "x,y"});

The second parameter is the vars object that contains any optional configuration data. Any of the following properties can be defined:

Note that if you're applying Draggable to a dynamically created element, that element should first be appended to the DOM before calling Draggable.create().