jointjs - JointJS 非交互元素

Question

我想禁用 JointJS Diagrams 中元素和链接的移动，同时保持其他功能，如元素的超链接和鼠标悬停时的链接突出显示。我参考了以下链接： https://groups.google.com/forum/#!searchin/jointjs/drag/jointjs/R0KZwKqfRbI/rGLJz3t4Un0J https://groups.google.com/forum/#!searchin/jointjs/仅阅读$20/jointjs/o8CKU6N7EOI/1KGNFCQQHGUJ

但他们没有帮助我。我试过：paper.$el.css('pointer-events', 'none'); 但它会禁用一切。我只想禁用元素和链接拖动

Answer 1

假设我对您的理解正确，那么第二个链接应该会给您答案。您只需使纸张非交互式：

var paper = new joint.dia.Paper({
    el: '#paper',
    width: 500,
    height: 500,
    gridSize: 1,
    graph: new joint.dia.Graph,
    interactive: false
});

这应该在保持突出显示功能的同时禁用元素/链接/顶点的任何移动。

Answer 2

paper.$el.css('pointer-events', 'none');

将禁用纸上所有内容的移动。如果要禁用特定元素的移动，请使用它。

element.attr({rect:{style:{'pointer-events':'none'}}});

详细信息：在jointjs中使元素“不可选择”

Answer 3

我的建议是获取事件对象并使用您自己的逻辑来禁用/保持活动。你如何做到这一点：

   var b_paperDraggable = false;
   var b_paperPropertise = false;

paper.on('cell:pointerdown', function (cellView) {

    if (b_paperDraggable == true) {
        //...
    }
    if (b_paperPropertise == true) {

        openPropInModal(cellView.model.id, cellView.model.attributes.elmTypeID);
        $("#modal-container").modal();
    }
});

Answer 4

我的解决方案是添加 cell.model.attr('./pointer-events','none');例如您需要搜索模型：

例如在创建元素之后：

var cell = paper.findViewByModel(graph.getLastCell());
cell.model.attr('./pointer-events','none');