Question

我正在尝试侦听DragFree事件以更新动态添加的节点上的位置数据。我相信我可以正确使用Delegate Selector的“节点”，因为我可以检测到Free，Click，Tap和Select，但不能检测到DragFree。

我没有在cy.add（）期间绑定事件，而是根据文档使用Delegate Selector'node'。如上所述，“ free”被触发，但是我还有其他事件监听器（例如“ tap”或“ click”）也触发了“ free”事件，因此我希望使用“ dragfree”来隔离其他位置更新代码基于事件的处理。

这是使用预设布局的复合图。

 const that = this;  //CY Context uses 'This' Keyword - React Instance Assigned to 'That' to avoid Reference Collision
                     //Inside CY Event Handlers

      //Delegate Selector Listener 
      //** that. = this.  fix for cy this keyword **

        cy.on('click', 'node',  (evt) => {
              console.log('Select Event');
              cy.elements().removeClass('selected');
              let selectedNode = cy.$('#'+evt.target.id());
              selectedNode.addClass('selected');
              that.loadSelectedAsset(evt.target.id());
        });

        cy.on('dragfree',  'node', (evt) => {
              console.log('DragFree Event');
              let selectedNode = cy.$('#'+evt.target.id());
              selectedNode.addClass('selected');
              return that.props.dispatch(updateDiagramPosition(evt.target.id(), evt.target.position('x'), evt.target.position('y')))
                        .then((asset) => {
                            that.saveDiagram();
                        })
                    that.loadSelectedAsset(evt.target.id());
         });

        //Dynamically Added Node
        let xposition= 0;
        let yposition= 0;
        let nodeObjAr = [];
        this.props.siteAssetData.map(asset => {
          let cyNodeObj = {
               data: {
                       id: asset._id,
                       parent: this.state.siteId,
                       label: asset.name
                     },
                       position:{x: xposition, y:yposition},
                       classes: assetFunction.toLowerCase().replace(/\s/g, ''),
                       group: "nodes",
                     }
          nodeObjAr.push(cyNodeObj);
        });
        cy.add(nodeObjAr);

我想根据事件将我的处理分开。

cy.on（'click'，'node'，（evt）=> ...



cy.on（'dragfree'，'node'，（evt）=> ...

未在“选择”上触发“无拖拽”的情况，反之亦然

Cytoscape.js DragFree在动态Node React App上未与代理一起触发

0 个答案: