Question

我有很多功能可以操纵一个div的位置，我需要另一个div（不是孩子或父母）来自动跟踪任何位置变化。

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

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

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

如何在CSS或jquery中实现这一点而不改变html结构并且不会弄乱draggable()中的选择器以及其他一些代码？

基本上，如何让一个div的位置（不是孩子或父母）完全链接/依赖于另一个div的位置？

Answer 1

您可以使用CSS属性，而无需使用js。您可以转到Overapi并确切了解它们如何更好地理解它们。在我眼里你应该做这样的事情：

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

然后......

.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;
}

Answer 2

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

这里的另一种方法

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

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

2 个答案: