防止在Joint JS中拖动

Question

我正在开发JointJS API。然而，我希望防止元素从其原始位置上移动。您能否建议我使用JointJS的某些功能或通常的CSS中的任何功能，以使我的对象静止不动。

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

请建议一种禁止元素移动但允许其他功能的方法。相关的CSS代码片段如下：

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

- Lahore

---

你能展示一些你已经尝试过的内容或者一些样例代码供大家参考吗？ - Pogrindis

嘿，我已经编辑了问题。请看一下 :) - Lahore

你好，你是否找到了你的问题的解决方案？ - chris loughnane

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，当点击链接时，method的值为pointerdown。

希望这能帮到您！

- Robert Klein Kromhof

---

很遗憾，根据我的使用情况，上述方法参数从未等于pointermove，原因不明。 - John Hoffman

我的方法参数未定义，有什么替代方案吗？ - Ramesh Vishnoi

Answer 2

我的解决方案是在Paper定义中添加以下内容：

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

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

element.set('locked', true);

- Kolban

Answer 3

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

- Helmut Kemper

---

OP似乎表明interactive属性不是一个选项。 - pingul

http://jointjs.com/api -> interactive - 如果设置为false，则禁用元素和链接的交互。如果它是一个函数，它将被调用与单元视图在操作和方法的名称被评估（'pointerdown'，'pointermove'，...）。如果这样的函数的返回值为false，则禁用该操作的交互。对于链接，交互对象有一些特殊属性，可用于禁用默认行为。这些属性包括：vertexAdd，vertexMove，vertexRemove和arrowheadMove。通过设置... - Helmut Kemper