Question

I just posted a question but I think I should reword it into something more general. Basically, I have an element that you can move around and resize using jQuery. Using CSS, I attached another div to this, to the right of it. When you first load the page, it’s right where it’s supposed to be. However, when I start to drag or resize the draggable div, the one that’s originally attached to it stays where it is.

Is there any way to bind this div to the other one, so that it moves with it? Preferrably, without putting it in a container, as that complicates more things considering the nature of my site.

Answer 1

There’s no way to do this without using a container, but you don’t need both elements in a container; you just need the “follower” to be a child of the draggable div.

Make sure the “follower” div is a child of the draggable div in your markup:

<div class="draggable">
    <p>I'm draggable...</p>
    <div class="follower">I follow</div>
</div>

In your CSS, set position on the outer div, but don’t specify any offsets:

.draggable { position: relative; }

Then, position the inner div, and give it offsets from the parent. You can position the inner as absolute or relative — in both cases, it will position itself relative to the nearest container that has position, in this case the parent draggable:

.follower { 
    position: absolute; 
    top: 0;
    right: 20px;
    etc...
}