如何监听CytoscapeJS节点的拖拽事件（只包括cursor/finger下的直属）

Question

我正在使用 Cytoscape JS 创建一个基于网络浏览器的图形操作工具。我在监听多选节点的拖拽事件时遇到了问题

我可以使用以下代码收听节点的 'drag' 事件：

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

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

我想实现的是监听当前选中多个节点的节点的拖拽事件，但只监听直接元素（包括只监听光标正下方或用户手指下的一个节点）。因此，每当我一次拖动多个选定节点时，事件只会触发到仅在手指或光标下拖动的节点。

这类似于 CytoscapeJS 当前可用的 grabon、freeon dragfreeon 事件。但是，没有 dragon 事件。我不想听所有当前选定节点事件的拖动事件。但只有当前在 cursor/finger.

下的那个

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

因此，有人知道如何在 Javascript 中实现吗？谢谢。

Answer 1

您可以使用 grabon、free 或类似的方法来检测目标，向其添加 class，并仅监听该目标节点的 drag 事件class。

下面代码中的 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());
})

如何监听CytoscapeJS节点的拖拽事件（只包括cursor/finger下的直属）

How to listen to drag event of CytoscapeJS node (including only the one directly under the cursor/finger)

javascript

cytoscape.js