如何从外部拖拽数据到cytoscape.js

在 Cytoscape.js 中，您可以通过拖放操作（如从外部拖动数据）来添加节点和边。以下是一个基本的实现方法：

1. 为您的 Cytoscape.js 实例设置一个 `drop` 事件监听器：

cy.on('drop', function(event, dropTarget){
  // 处理拖放事件的代码
});

2. 在 `drop` 事件监听器中，获取拖放事件中传递的数据并创建节点或边：

cy.on('drop', function(event, dropTarget){
  // 获取拖放事件中传递的数据
  var data = event.originalEvent.dataTransfer.getData('text/plain');

  // 创建节点或边
  if(dropTarget === cy){
    // 如果拖放到画布上，则创建节点
    cy.add({
      group: 'nodes',
      data: { label: data },
      position: { x: event.position.x, y: event.position.y }
    });
  } else {
    // 如果拖放到节点上，则创建边
    var sourceId = dropTarget.id();
    var targetId = cy.add({
      group: 'nodes',
      data: { label: data },
      position: { x: event.position.x, y: event.position.y }
    }).id();

    cy.add({
      group: 'edges',
      data: { source: sourceId, target: targetId }
    });
  }
});

在这个示例中，我们检查拖放事件的目标是放在画布上还是节点上。如果放在画布上，我们创建一个新的节点；如果放在节点上，我们创建一条连接源节点和新节点的边。

请注意，这只是一个基本示例，您可以根据需要对其进行自定义和修改。