`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?
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 |