Prevent dragging in Joint JS

Question

I am working on JointJS API. However I want to prevent the elements from being movable from their original positions. Can you suggest me some feature of JointJS or any feature of CSS in general, which I could use to make my object immovable.

I can't use interactive: false option on the paper or paper.$el.css('pointer-events', 'none'); because I need to have highlighting features when mouse hovers over the element.

Please suggest a way that disables movement of elements while allowing other features. The relevant CSS code snippet is as follows:

.viewport {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.element {
    /* Give the user a hint that he can drag&drop the element. */
    cursor: crosshair;
    position: fixed;
}
.element * {
    /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
    vector-effect: non-scaling-stroke;
    -moz-user-select: none;
    user-drag: none;
    position: fixed;
}

can you show us some of what you haev tried, or some sample code to play with.. — Pogrindis, May 27 '14 at 09:25

score 2 · Answer 1 · answered Aug 24 '16 at 11:38

2

The interactive option also allows a function value. To only allow interaction with links (more specificly joint.dia.LinkView instances), you could do this:

var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 400,
  height: 400,
  model: graph,
  interactive: function(cellView, method) {
    return cellView instanceof joint.dia.LinkView; // Only allow interaction with joint.dia.LinkView instances.
  }
});

Alternatively, you could check the method argument. The method value is pointermove when trying to drag an element, and pointerdown when clicking a link.

I hope this helps!

answered Aug 24 '16 at 11:38

Robert Klein Kromhof

506
3
15

Unfortunately, the method argument above is never equal to pointermove for some reason based on my usage. – John Hoffman Mar 04 '17 at 10:51
method argument is undefined for me. any alternatives? – Ramesh Vishnoi Dec 10 '20 at 08:40

score 0 · Answer 2 · answered Oct 17 '21 at 15:54

The solution that worked for me was to add the following to the Paper definition:

interactive: function(cellView) {
  if (cellView.model.get('locked')) {
    return {
      elementMove: false
    };
  }
  // otherwise
  return true;
}

and then on an element I wanted to lock (prevent from moving), I added:

element.set('locked', true);

score -1 · Answer 3 · answered Apr 12 '16 at 19:58

-1

var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 400,
  height: 400,
  gridSize: 10,
  model: graph,
  interactive: false // <------
});

answered Apr 12 '16 at 19:58

Helmut Kemper

662
1
6
15

OP seems to indicate that the `interactive` attribute is not an option. – pingul Apr 12 '16 at 20:22
http://jointjs.com/api -> 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 ... – Helmut Kemper Apr 26 '16 at 17:58

Prevent dragging in Joint JS

3 Answers3