JointJS Non-interactive elements

Question

I want to disable the movement of elements and links in JointJS Diagrams while keeping alive other featurs like hyperlinking of elements and highlighting of link on mouse:hover. I referred to the following links: https://groups.google.com/forum/#!searchin/jointjs/drag/jointjs/R0KZwKqfRbI/rGLJz3t4Un0J https://groups.google.com/forum/#!searchin/jointjs/read$20only/jointjs/o8CKU6N7EOI/1KGNFCQQHGUJ

But they didn't help me. I tried: paper.$el.css('pointer-events', 'none'); But it disables everything. I want to disable only element and link dragging

Answer 1

Assuming that I understand you correctly than the 2nd link should give you the answer. You simply have to make the paper non-interactive:

var paper = new joint.dia.Paper({
    el: '#paper',
    width: 500,
    height: 500,
    gridSize: 1,
    graph: new joint.dia.Graph,
    interactive: false
});

This should disable any movement of elements/links/vertices while maintaining the highlighting features.

Answer 2

paper.$el.css('pointer-events', 'none');

will disable the movement of everything on paper. If you want to disable the movement of specific element,use it.

element.attr({rect:{style:{'pointer-events':'none'}}});

Detail here: Make elements 'not selectable' in jointjs