我正在研究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;
}
答案 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 // <------
});