jQuery UI multiple draggable plugin

Sunday, 29 November 2009


The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group. The aim of the plugin is to include all of the current functionality listed in the options.

To group and ungroup elements simply control click, the ui-multidraggable extension is applied for styling purposes and also to alert the plugin as to which elements are grouped.


You can view the following demos:

You can also download the plugin and the demos from here.

An update has now been provided for this plugin thanks to Caili Crane @ Pulse Energy allowing the plugin to be used with jQueryUI 1.8.8 and jQuery 1.4.4 and can be downloaded here.

As this is an extension of the base functionality it is also released under a dual GPL and MIT license. You can view copies of these licenses in the package when you download the source from the link above.

Following is a list of all the options from the draggable element and how they work with the multidraggable plugin:

  • addClasses works and is set on an individual level
  • appendTo works and is set on an individual level
  • axis works and is set on an individual level
  • cancel works and is set on an individual level
  • containment works and is set on an individual level
  • cursor works and is set on an individual level
  • cursorAt works and is set on an individual level
  • delay works and is set on an individual level
  • distance works and is set on an individual level
  • grid works and is set on an individual level
  • handle works and is set on an individual level
  • helper works and is set on an individual level
  • iFrameFix works and is set on an individual level
  • opacity works and is set on an individual level
  • refreshPositions works and is set on an individual level
  • revert works and is set on an individual level
  • revertDuration works and is set on an individual level. Note: this currently throws an error if two elements have different revertDurations and you attempt to drag before both have reverted to their original position.
  • scope works and is set on an individual level
  • scroll works and if any in the group have scroll set to true then enclosing element will scroll
  • scrollSensitivity works and is set on an individual level
  • scrollSpeed works and is set on an individual level, but once all elements are outside the original container the speed of the fastest grouped element is used
  • snap works and is set on an individual level
  • snapMode works and is set on an individual level
  • snapTolerance works and is set on an individual level
  • stack works, whichever element from the group is the one being dragged will have the highest zIndex
  • zIndex works and is set on an individual level

The only functionality I am aware of that currently does not work is the connectToSortable which I am working on resolving for the next release.

As you can see from the working options above, these settings are set on an individual but are likely to work more cohesively if they have the same values and options set. This was purposely done to allow for flexibility and usability (you may want certain items to have different opacity etc.).

I have very pleased to be able to release this plugin and hope it is useful. My first attempt at doing this nearly a year ago was miles away from where it is now and I am grateful to this post for teaching me how to do this the correct way.

Please let me know if you have any constructive feedback and if you are using this plugin anywhere.

Enjoy!
blog comments powered by Disqus