Есть ли способ перетаскивания узлов в или из других узлов в Cytoscape js?

Question

Я ищу способ перетащить узел из своего составного узла и отбросить его на другой узел (который будет потом его новым родителем).

В примере показаны некоторые захваченные узлы в составных узлах. Но я не нашел способа «освободить» их от dnd.

http://jsbin.com/gist/5b192c88616af2f75344?output

Я отсутствующий также некоторые события, такие как HTML5 DragOver, dragout и такие вещи. Есть ли способ получить это?

Я попытался использовать данные jt-события cytoscape, чтобы «переместить» некоторые узлы, но без хорошего пользовательского опыта.

Answer 1

Cytoscape.js позволяет создавать собственные жесты, создавая собственные события. Это довольно просто, чтобы создать свои собственные dragover и т. Д. События поверх drag и ele.boundingBox(). Вы можете структурировать свой жест и настраиваемое событие в autoscaffoldedextension для более многоразового использования, если хотите. Если вы делаете расширение, пожалуйста, отправьте его на адрес the list, чтобы другие разработчики могли извлечь из этого выгоду и внести свой вклад в это.

Основная библиотека должна быть сохранена, что препятствует выполнению дорогостоящих проверок dragover. В противном случае основные проблемы для других разработчиков будут отрицательно сказаться.

Ваш пользовательский жест может сделать определенные предположения - то, что ядро ​​lib не может - ускорить работу. Например, если вы заботитесь только о составных родительских узлах для событий dragover и т. Д., Вы можете делать проверки ограничивающей рамки только для родителей.

Answer 2

Основываясь на ответе maxkfranz, этот подход позволит добавить родителя к узлу, перетащив его в него. Привязать событие ленты (срабатывает при отпускании) к сиротским узлам (без родителей), в которых вы обнаруживаете, находится ли указатель мыши в ограничивающей рамке родительского узла.

//dragging orphan nodes into parents 
cy.on('tapend', ':orphan', function(event){ 
    var node = event.cyTarget; 
    var mouse = event.cyRenderedPosition; 

    cy.$(':parent').each(function(i, ele){ 
     //ensure we dont drag into self 
     if (ele !== node){ 
      //check if we dragged into a compound node 
      var pos = ele.renderedBoundingBox(); 
      if (mouse.x > pos.x1 && mouse.x < pos.x2){ 
       if (mouse.y > pos.y1 && mouse.y < pos.y2){ 
        console.log("Move ", node.id(), " into ", ele.id()); 
        node.move({ 
         parent: ele.id() 
        }); 
       } 
      } 
     } 
    }); 
}); 

Вы можете использовать цикл ForEach вместо и разорвать петлю после node.move(), только в случае перекрытия узлов и небольшое увеличение производительности.