防止在联合 JS 中拖动

Question

我正在研究 JointJS API。但是我想防止元素从它们的原始位置移动。您能否建议我使用 JointJS 的一些功能或一般的 CSS 的任何功能，我可以使用它们来使我的对象不可移动。

我不能在纸上使用 interactive: false option 或 paper.$el.css('pointer-events', 'none'); 因为我当鼠标悬停在元素上时需要具有突出显示功能。

请提出一种在允许其他功能的同时禁止元素移动的方法。相关CSS代码sn-p如下：

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

Answer 1

interactive 选项还允许function 值。要只允许与链接交互（更具体地说是joint.dia.LinkView 实例），您可以这样做：

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

或者，您可以检查method 参数。尝试拖动元素时method 的值为pointermove，单击链接时为pointerdown。

我希望这会有所帮助！

Answer 2

对我有用的解决方案是将以下内容添加到 Paper 定义中：

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

然后在我想锁定的元素上（防止移动），我添加了：

element.set('locked', true);

Answer 3

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