防止联合JS中的拖动

时间:2014-05-27 09:22:52

标签: css jointjs

我正在研究JointJS API。但是我希望防止元素从原始位置移动。你能否告诉我JointJS的一些功能或CSS的任何功能,我可以使用它来使我的对象不可移动。

我不能在论文或纸张上使用 interactive:false选项。$ 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;
}

2 个答案:

答案 0 :(得分:0)

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值为{{1}}。

我希望这有帮助!

答案 1 :(得分:-1)

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