带有 Cytoscapejs 复合拖放扩展的事件

Question

我正在使用 cytoscapejs 和扩展复合拖放。我的目标是在我将一个节点拖放到另一个节点上时向我的数据库发送一个事件。我正在使用 cdndtapstart 或 cdndout（当它在复合节点内时）和 event.target._private.data.id 获取（我未来的子节点的）id，然后使用 cdnddrop 我调用 dropSibling._private.data.id，并使用此数据我可以接听我的 ajax 电话。我遇到的问题是这些事件一个接一个地累积，如果我拖动节点一次就可以了，第二次拖动它时，它会产生两个 ajax 调用，第三次会给我三个电话。有没有办法避免这种情况，还是应该将其报告为错误？

cy.on('cdndout', 'node', function(event, dropTarget, dropSibling){
    let type = event.target._private.data.type;
    let id = event.target._private.data.id;
    let gId = event.target._private.data;

    if(type == 'device'){
      cy.on('cdnddrop', function(event, dropTarget, dropSibling){
        var typeDe = dropSibling._private.data
        if(typeDe == undefined){
          $.notify({message: err},{type: 'danger'});
          createGraph()
        } else {
          let uuid = event.target._private.data.id;
          let gId = dropSibling._private.data.id;
          setResourceToGroup(uuid, gId, cb)
          .then(reso => getAllResources())
          .then(allReso => createGraph())
          .catch(err => {
            $.notify({message: parseLog(err)},{type: 'danger'});
            createGraph()
          })
        }
      })
    } 
})

因此，使用此代码，我在函数 setResourceToGroup 中调用的 ajax 将在我拖动节点时执行多次。我猜我没有正确处理这些事件，而且它们正在累积……对此有什么帮助吗？

Answer 1

cytoscape.js中的事件非常简单，您绑定一个事件，当满足绑定事件的条件时触发该事件。当您调用相同的绑定操作两次或更多次时，问题就开始了。然后你的事件正常工作，但是第二次你再次调用那个绑定，你手上有 2 个事件。他们会同时开火！那怎么解决呢？

每次调用cy.bind()（cy.bind() 与cy.on() 相同）时，您必须评估该行是否可以执行多次.如果是，那么您必须这样做：

cy.unbind('cdnout');
cy.bind('cdndout', 'node', function(event, dropTarget, dropSibling){
    let type = event.target._private.data.type;
    let id = event.target._private.data.id;
    let gId = event.target._private.data;
    if(type == 'device'){
      cy.unbind('cdnddrop);
      cy.bind('cdnddrop', function(event, dropTarget, dropSibling){
        var typeDe = dropSibling._private.data
        if(typeDe == undefined){
          $.notify({message: err},{type: 'danger'});
          createGraph()
        } else {
          let uuid = event.target._private.data.id;
          let gId = dropSibling._private.data.id;
          setResourceToGroup(uuid, gId, cb)
          .then(reso => getAllResources())
          .then(allReso => createGraph())
          .catch(err => {
            $.notify({message: parseLog(err)},{type: 'danger'});
            createGraph()
          });
        }
      });
    } 
});

通过先取消绑定事件，一次只能触发一个事件:)

带有 Cytoscapejs 复合拖放扩展的事件

Events with Cytoscapejs compound-drag-and-drop extension

cytoscape.js