我正在研究 JointJS API。但是我想防止元素从它们的原始位置移动。你能建议我一些 JointJS 的特性或 CSS 的任何一般特性,我可以用它来使我的对象不可移动。
我不能在论文或 paper.$el.css('pointer-events', 'none'); 上使用 interactive: false option 因为我当鼠标悬停在元素上时需要具有突出显示功能。
请提出一种在允许其他功能的同时禁用元素移动的方法。相关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;
}
最佳答案
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
。
希望对您有所帮助!
关于css - 防止在 Joint JS 中拖拽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23885646/