jQuery Drag - 将一个 div 绑定(bind)到可拖动的 div

Question

我刚刚发布了一个问题，但我认为我应该将其改写为更笼统的内容。基本上，我有一个元素，您可以使用 jQuery 移动它并调整它的大小。使用 CSS，我在其右侧附加了另一个 div。当您第一次加载页面时，它就在它应该在的位置。但是，当我开始拖动或调整可拖动 div 的大小时，最初附加到它的那个 div 会留在原处。

有没有办法将这个 div 绑定(bind)到另一个 div，以便它随之移动？最好不要将它放在容器中，因为考虑到我网站的性质，这会使事情变得复杂.

Answer 1

如果不使用容器就无法做到这一点，但是您不需要将这两个元素都放在一个容器中；你只需要“跟随者”成为可拖动 div 的 child 。

确保“follower”div 是标记中可拖动 div 的子元素:

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

在您的 CSS 中，在外部 div 上设置位置，但不要指定任何偏移量:

.draggable { position: relative; }

然后，定位内部 div，并为其指定相对于父级的偏移量。您可以将内部定位为绝对或相对——在这两种情况下，它都会相对于最近的具有位置的容器定位自身，在本例中为父级可拖动对象:

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