CODEWITHSUNDEEP
cssjointjs
Lahore
Lahore

Reputation: 133

Prevent dragging in Joint JS

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;
}

Upvotes: 5

Views: 5314

Answers (3)

Kolban
Kolban

Reputation: 15246

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);

Upvotes: 0

Robert Klein Kromhof
Robert Klein Kromhof

Reputation: 516

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!

Upvotes: 2

Helmut Kemper
Helmut Kemper

Reputation: 712

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

Upvotes: -1

Related Questions