jsPlumb: ¿cómo hacer que los conectores de diagrama de flujo eviten la intersección de elementos?
¿Es posible hacer que los conectores del diagrama de flujo jsPlumb no crucen elementos conectables o elementos especificados (en el ejemplo: elementos con clase 'item')?
Comportamiento predeterminado del diagrama de flujo:
Un resultado deseado:
Esto es lo que intenté:
Editado para aclararHTML <div id="root">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="item" id="item3">Item 3</div>
<div class="item" id="item4">Item 4</div>
<div class="item" id="item5">Item 5</div>
</div>
JS jsPlumb.connect({
source: $('#item2'),
target: $('#item7'),
anchors: [ "Continuous" ],
connector:[ "Flowchart" ],
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
}
});
Básicamente, para que el motor jsPlumb (SVG o lienzo) tenga en cuenta los elementos DOM relevantes y tenga un esquema de evitación de objetos