Community Edition 4.x Beta Release Community Edition 4.x Beta Release
20 Jun 2020
World Cup 2018, Part 2 World Cup 2018, Part 2
26 Jun 2018
World Cup 2018, Part 1 World Cup 2018, Part 1
25 Jun 2018
Community Edition 2.2.2 Release Community Edition 2.2.2 Release
20 Oct 2016
Connecting SVG Shapes (Raphael, Highcharts etc) (update) Connecting SVG Shapes (Raphael, Highcharts etc) (update)
20 Oct 2016
Writing a Layout Decorator Writing a Layout Decorator
25 Jul 2015
Toolkit Edition 1.0.0 Toolkit Edition 1.0.0
23 Jul 2015
Community Edition 1.7.6 Community Edition 1.7.6
23 Jul 2015
Connecting SVG Shapes (Raphael, Highcharts etc) Connecting SVG Shapes (Raphael, Highcharts etc)
22 Jul 2015
The beforeDrag Interceptor The beforeDrag Interceptor
15 Jan 2015
Integrating Jekyll and YUIDoc Integrating Jekyll and YUIDoc
28 Jan 2014
Dragging Multiple Elements Dragging Multiple Elements
17 Jan 2014
Custom Connectors Custom Connectors
22 Dec 2013

Dragging Multiple Elements

Vanilla jsPlumb has two features that the jQuery version does not:

  • dragging multiple elements
  • supporting multiple drag/drop scopes

These capabilities are provided by the underlying drag library - Katavorio - that
vanilla jsPlumb uses.

In this post we'll discuss how to drag multiple elements.

Incidentally, Katavorio does not depend on jsPlumb, and can be used elsewhere. A discussion of how to do so is outside the scope of this post - if you're interested, check out the code, and if you have any questions, drop us a line.

Drag Selection

The basic new concept introduced into jsPlumb is that of the drag selection - a list of elements that, whenever some element is dragged, should also be dragged, and whose location relative to the element being dragged should remain constant. To support this, there are three new methods available on an instance of jsPlumb:

  • addToDragSelection

Takes as argument either a String, representing a selector (which is to say that to specify a single element using a string you must prepend the id with a #), an Element, a NodeList, an array of Elements, or a list of Strings (representing a list of selectors). Adds all of the found elements to the current drag selection.

  • removeFromDragSelection

Takes as argument either a String, representing a selector (which is to say that to specify a single element using a string you must prepend the id with a #), an Element, a NodeList, an array of Elements, or a list of Strings (representing a list of selectors). Removes all of the found elements from the current drag selection.

  • clearDragSelection

Clears the current drag selection.

Example

In this example we have a bunch of elements that each have a + and a - button, to add or remove the element to/from the drag selection.

Each element is configured to be a connection source (you can drag new connections from the blue div; the rest of the
element acts as a drag handle for the entire element) and target, using Continuous anchors.

CSS

You will most likely have noticed in the example that whenever you add an element to the drag selection its appearance changes. This is achieved via CSS: jsPlumb adds a class to each element that is part of the drag selection:

jtk-drag-selected