如何收听CytoscapeJS节点的拖动事件(仅包括光标/手指正下方的事件) [英] How to listen to drag event of CytoscapeJS node (including only the one directly under the cursor/finger)

问题描述

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

I am using Cytoscape JS to create a web browser-based graph manipulation tool. I am facing a problem in listening the drag event of multiple selection of nodes.

我可以使用以下代码来侦听节点的拖动"事件:

I could listen to 'drag' event of nodes using the following code:

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

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

However, when I drag several nodes at once, the event is triggered to all selected nodes individually.

我要完成的工作是侦听当前选择了多个节点的节点的拖动事件，但只能直接侦听该元素(仅包括光标或用户手指正下方的一个节点).这样，每当我一次拖动多个选定的节点时，该事件仅触发到仅在手指或光标下拖动的那个节点.

What I want to accomplish is to listen to drag event of a node where several nodes are currently selected, but only listen to the element directly (including only the one node directly under the cursor or the user’s finger). So that whenever I drag multiple selected nodes at once, the event only triggered to the one that being dragged under the finger or cursor only.

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

This is similar to grabon, freeon dragfreeon events that is currently available to CytoscapeJS. However, there is no dragon event for this. I don't want to listen to drag event of all currently selected node events. But only the one that is currently under the cursor/finger.

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

I have been trying to find the cursor position from the passed e parameter, so that I can test whether the cursor is currently over the current triggering node or not. However the position and renderedPosition attributes values were found to be undefined. So I can't do the cursor position test.

因此，外面有人知道如何用Javascript实现吗?谢谢.

Therefore, is someone out there know how to implement this in Javascript? Thank you.

推荐答案

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

You could use grabon, free or similar to detect the target, add a class to it, and listen to drag events only for nodes of that class.

下面的代码中的 item.isNode()检查有点没有意义.

The item.isNode() check in the code below is kinda pointless.

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节点的拖动事件(仅包括光标/手指正下方的事件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！