2017-04-24 2 views
1

Also ich versuche, eine baumähnliche Benutzeroberfläche aus Knoten durch Divs, die durch Klicken auf einen Sockel und Ziehen an den Sockel eines anderen Knoten verbunden werden können. Der Knoten sieht folgendermaßen aus:Position Divs relativ zueinander ohne Parenting

<div class="node"> 
    <div class="upper-socket" /> 
    <div class="lower-socket" /> 
</div> 

.node { 
    position: relative; 
    // other properties 
} 

.socket { 
    position: absolute; 
    // other properties 
} 

Ich verwende JQuery ziehbar, um den Elternknoten ziehbar zu machen. Aber wenn der Benutzer aus dem Socket zieht, möchte ich einen Pfad mit Svg gezeichnet werden. Zum Beispiel möchte ich, dass der Benutzer in der Lage ist, vom unteren Knoten von A zum obersten Knoten von B zu klicken und eine Verbindung herzustellen. Stattdessen erbt der Socket die ziehbaren Eigenschaften des übergeordneten Elements. Wie kann ich das beheben?

enter image description here

Antwort

0

Je nachdem, wie Sie dies aus lagen, könnten Sie die relative Positionierung auf divs verwenden, die zueinander benachbart sind. Das könnte funktionieren, je nachdem, was du versuchst.

Sie können auch versuchen, float: links. Das könnte die Antwort sein.

Drittens kann ich vorschlagen, die Anzeige Ihres div über CSS zu ändern. Wenn Sie etwas wie "Anzeige: Inline-Block" gemacht haben, würde es es neben anderen positionieren.

Wenn diese nicht helfen, würde ich vorschlagen, eine Illustration zu posten. Es würde helfen, Ihr Konzept zu vermitteln.

+0

Ich habe eine Illustration und einen Code hinzugefügt, um die Frage klarer zu machen. – user3685285

Verwandte Themen