jsPlumb: Wie vermeide ich, dass sich Elemente überschneiden, wenn Flowchart-Konnektoren verwendet werden?

Question

May 16, 2012, 05:39 PM

jsPlumb: Wie vermeide ich, dass sich Elemente überschneiden, wenn Flowchart-Konnektoren verwendet werden?

Ist es möglich, jsPlumb Flowchart-Konnektoren so zu erstellen, dass verbindbare Elemente oder bestimmte Elemente nicht überkreuzt werden (im Beispiel: Elemente mit der Klasse 'item')?

Standardverhalten des Flussdiagramms:

Ein gewünschtes Ergebnis:

Folgendes habe ich versucht:

http://jsfiddle.net/CcfTD/1/

Zur Verdeutlichung bearbeitetHTML

 <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
    }
});

Grundsätzlich muss die jsPlumb-Engine (SVG oder Canvas) die relevanten DOM-Elemente kennen und ein Objektvermeidungsschema haben

http://jsfiddle.net/adardesign/2ZFFc/