육아없이 위치 div의 상대방

Question

그래서 노드를 클릭하고 소켓을 클릭하고 다른 노드의 소켓으로 드래그하여 연결할 수있는 div로 표시된 노드에서 트리와 같은 UI를 작성하려고합니다. 노드는 다음과 같습니다.

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

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

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

부모 노드를 드래그 가능하게 만들기 위해 JQuery draggable을 사용하고 있습니다. 하지만 사용자가 소켓에서 드래그하면 svg를 사용하여 경로를 그려야합니다. 예를 들어 사용자가 A의 맨 아래 노드에서 B의 맨 위 노드로 클릭하여 연결을 할 수있게하려고합니다. 대신 소켓은 부모의 드래그 가능한 속성을 상속받습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

은이를 배치하는 방법에 따라 서로 인접 된 div에서 상대 위치를 사용할 수 있습니다. 그것은 당신이하려는 일에 따라 효과가 있습니다.

float : left를 시도해 볼 수도 있습니다. 그 대답 일 수 있습니다.

셋째, CSS를 통해 div의 표시를 변경하는 것이 좋습니다. "display : inline-block"과 같은 일을했다면, 다른 사람 옆에 위치시킬 것입니다.

이것이 도움이되지 않는다면, 나는 삽화를 게시하는 것이 좋습니다. 그것은 당신의 개념을 전달하는 데 도움이 될 것입니다.