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