interactive - Configure which of the default interactions with elements and links should be enabled.

The property value defaults to { labelMove: false }. This can be overwritten in three ways: with a boolean value, with an object specifying interaction keys, or with a function.

If set to false, all interactions with elements and links are disabled. If set to true, all interactions are enabled.

// disable all interaction
var paper = new joint.dia.Paper({
    // ...
    interactive: false,
});

// enable all interaction (including labelMove)
var paper = new joint.dia.Paper({
    // ...
    interactive: true,
});

Using an object, specific interactions may be disabled by assigning false to their corresponding property name. It is not necessary to pass true values; all omitted properties are assigned true by default. (Note that the passed object is not merged with the default; unless labelMove is explicitly excluded, it becomes enabled.) A full list of recognized interaction keys is provided below.

// disable arrowheadMove
var paper = new joint.dia.Paper({
    // ...
    interactive: { arrowheadMove: false }
});

// disable all element interactions
var paper = new joint.dia.Paper({
    // ...
    interactive: { elementMove: false, addLinkFromMagnet: false }
});

If defined as a function, the function is passed cellView (the elementView/linkView the user is about to interact with) as the first parameter, followed by the name of the event ('pointerdown', 'pointermove', ...) that triggered the interaction. The return value of the function is then interpreted in the way specified above (false causes all interaction to be disabled, an object disables specific interactions, etc.).

// disable link interactions for cellViews when a custom property is set
var paper = new joint.dia.Paper({
    // ...
    interactive: function(cellView) {
        if (cellView.model.get('disableLinkInteractions')) {
            return {
                linkMove: false,
                labelMove: false,
                arrowheadMove: false,
                vertexMove: false,
                vertexAdd: false,
                vertexRemove: false,
                useLinkTools: false,
            };
        }

        // otherwise
        return true;
    }
});

The example below has all interactions on the link and on the elements enabled. This is the default behavior:

The following tables present a list of all recognized interaction keys, followed by an example of a paper with only the related interactive property set to true (and all other properties set to false).

Links:

linkMove

Is the user allowed to move the link?

labelMove

Is the user allowed to move the link label?

Use the paper.options.snapLabels paper option to only allow the label to be dragged along the length of the link.

arrowheadMove

Deprecated. Use a link tool instead.

(Is the user allowed to move the arrowheads?)

vertexMove

Deprecated. Use a link tool instead.

(Is the user allowed to move the vertices?)

vertexAdd

Deprecated. Use a link tool instead.

(Is the user allowed to add vertices by clicking along the link path?)

vertexRemove

Deprecated. Use a link tool instead.

(Is the user allowed to remove vertices?)

useLinkTools

Deprecated.

(Is the user allowed to use the default link buttons?)

Elements:

elementMove

Is the user allowed to move the element?

addLinkFromMagnet

Is the user allowed to add connections from magnets/ports?

The stopDelegation option is special. If it is true (default), the element's elementMove option determines whether the element responds to user drag.

However, if stopDelegation is false and the element is embedded within a parent, the user's dragging is delegated to the embedding parent. The parent's elementMove option then determines whether both elements respond to user drag. The behavior is recursive. If the embedding parent has stopDelegation: false, it delegates to its own embedding parent's elementMove option and so on. If all children within an embedding have stopDelegation set to false, then no matter which element is dragged by the user, the whole embedding is dragged.

If the element is not embedded within an element, the stopDelegation option is ignored (treated as true). There is no other element to delegate to. Then elementMove determines whether the element responds to user drag.

In the following example, both embedded elements have stopDelegation: false. Thus, when the embedded element is dragged by the user, the parent ancestor (Movable) is dragged instead. When the parent ancestor has elementMove disabled (Not movable), nothing happens.

stopDelegation