如何使一个Div的位置（不是孩子或父母）与另一个Div的位置完全相关/依赖？

I have a bunch of functionality for manipulating one div's position and I need another div (not child or parent) to follow any position change automatically.

我有一堆功能来操纵一个div的位置,我需要另一个div(不是孩子或父母)来自动跟踪任何位置变化。

Here is a very simplified illustration: http://jsfiddle.net/ZHLD5/

这是一个非常简化的插图:http://jsfiddle.net/ZHLD5/

<div id="follower"></div>
<div id="main"></div>

$('#main').draggable();

How to achieve this in CSS or jquery without changing html structure and without messing with selectors in draggable() and bunch of other codes?

如何在CSS或jquery中实现这一点而不更改html结构并且不会在draggable()和其他代码中混淆选择器?

So basically, how to make one div's position (not child or parent) completely linked / dependent on another div's position?

所以基本上,如何使一个div的位置(不是孩子或父母)完全链接/依赖于另一个div的位置?

2 个解决方案

#1

$('#main').draggable({
  drag: function( event, ui ) {
    $('#follower').css({
      top: ui.position.top,
      left: ui.position.left
    });
  }
});

Another approach here

另一种方法

As long as you are using draggable(jQuery ui),You can easily achieve it like this. But since the function is called alot. don't forget to use id as the selector for performance.

只要你使用draggable(jQuery ui),就可以轻松实现这一点。但由于该功能被称为很多。不要忘记使用id作为性能选择器。

#2

You can use CSS properties for this without having to use js. You can go to Overapi and check exactly how they work to understand them better. In my eyes you should do something like this:

您可以使用CSS属性,而无需使用js。您可以前往Overapi并确切了解他们如何更好地理解他们。在我眼里,你应该做这样的事情:

<div class="page_holder">
 <div class="stuck"></div>
 <div class="page">
    <div class="container">
        <div class="content"></div>
    </div>
 </div>
</div>

And then...

.page_holder{
  position: absolute;
  top:50px;
  left:200px;
  width:200px;
  height:300px;
}
.page {
  position: absolute;
  top:0;
  left:0;
  width:200px;
  height:300px;
  overflow:auto;
  z-index: 1;
}
.container {
  position:relative;
}
.stuck {
  position: absolute;
  top:0;
  right:0;
  left:0;
  height:50px;
  background:blue;
  margin-right: 18px;
  z-index: 2;
}
.content {
  height:700px;
  background:gray;
}

#1

$('#main').draggable({
  drag: function( event, ui ) {
    $('#follower').css({
      top: ui.position.top,
      left: ui.position.left
    });
  }
});