Make only links interactive in joint js

I got this joint js code with some rects and links:

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#div1'),
    interactive: false,
    width: 1200,
    height: 1200,
    model: graph,
    gridSize: 1
});
    var rect1 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var rect2 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value + 80 },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var link{{ pre }} = new joint.dia.Link({
        source: { id: rect1.id },
        target: { id: rect2.id },
        vertices: [{ x: initialx, y: syposition.y + 23 }, { x: initialx, y: typosition.y + 23 }],
    });

As you can see I have the paper property interactive in 'false', so the user can't drag and drop any element or delete links, but actually want that they can drag the link vertices as they wish. How can I do it? Which property in joint.min.css? Or from this code is there a way?

Thanks in advance!

Solution

First of all you can define interactive as a function, that returns true for links and false for elements. That makes links interactive while elements not.

var paper = new joint.dia.Paper({
  interactive: function(cellView) {
    return cellView.model.isLink();
  }
});

And as per documentation

interactive - if set to false, interaction with elements and links is disabled. If it is a function, it will be called with the cell view in action and the name of the method it is evaluated in ('pointerdown', 'pointermove', ...). If the returned value of such a function is false interaction will be disabled for the action. For links, there are special properties of the interaction object that are useful to disable the default behaviour. These properties are: vertexAdd, vertexMove, vertexRemove and arrowheadMove. By setting any of these properties to false, you can disable the related default action on links.

by doing the following you can enable the vertex movement only.

interactive: function(cellView) {
  if (cellView.model.isLink()) {
    return {
      vertexAdd: false,
      vertexRemove: false,
      arrowheadMove: false,
      // vertexMove: true
    }
  }
  return false;
}

http://jsfiddle.net/kumilingus/03omcuLm/