如何收听CytoscapeJS节点的拖动事件（仅包括光标/手指正下方的事件）

Posted 2023-02-28

我正在使用Cytoscape JS创建基于Web浏览器的图形处理工具。我在侦听多个选择节点的拖动事件时遇到问题。

我可以使用以下代码来侦听节点的“拖动”事件：

cy.on('drag', 'node', function (e) 
  let draggedNode = e.target
  ...

但是，当我一次拖动多个节点时，该事件将分别触发所有选定的节点。

[我想完成的是，侦听当前选择了多个节点的节点的拖动事件，但是仅直接侦听该元素（仅包括光标或用户手指正下方的一个节点）。这样，每当我一次拖动多个选定的节点时，该事件只会触发到仅在手指或光标下拖动的事件。

这类似于CytoscapeJS当前可用的grabon，freeon dragfreeon事件。但是，没有dragon事件。我不想听所有当前选定的节点事件的拖动事件。但是只有当前位于光标/手指下的那个。

我一直在尝试从传递的e参数中找到光标位置，以便我可以测试光标当前是否在当前触发节点上。但是，发现position和renderedPosition属性值是undefined。因此我无法进行光标位置测试。

因此，有人在那里知道如何用javascript实现吗？谢谢。

答案

您可以使用grabon，free或类似对象来检测目标，为其添加一个类，并仅针对该类的节点侦听drag事件。

下面的代码中的item.isNode()检查是毫无意义的。

cy.on('grabon', 'node', (e) => 
    let item = e.target;

    if (item.isNode()) 
        item.addClass('drag-parent');
    
);

cy.on('free', 'node', (e) => 
    let item = e.target;

    if (item.isNode() && item.hasClass('drag-parent')) 
        item.removeClass('drag-parent');
    
)

cy.on('drag', 'node.drag-parent', (e) => 
    let item = e.target;

    console.warn(item.id());
)