如何在当时拖动2个div

时间:2011-11-16 14:12:22

标签: javascript jquery html css jquery-ui

如何制作,当第一个div拖动时,第二个div也拖动

first div drags with jquery ui

<div id="draggable"  style="position: absolute; z-index: 999; width: 100px; height: 100px; background: orange;"></div>
<div id="xren" style="position: absolute; z-index: 998; width: 100px; height: 100px; background: orange;"></div>

<script type="text/javascript">
  var a = $('#draggable').offset();
 $('#xren').css("top", a.top + 100 + "px");
 $('#xren').css("left", a.left + 100 + "px");

但它不起作用

enter image description here

第一个div与jquery ui&amp; amp;第一个div拖动时,第二个div拖动

2 个答案:

答案 0 :(得分:5)

类似的东西:

$("#div1").bind("drag", function(){
    var offset = $(this).offset();
    $("#div2").css({ left : offset.left, top: offset.top});
});

反之亦然。

答案 1 :(得分:1)

您必须在div上设置正确的位置属性,然后才能移动元素。 见/ 2&amp; /0.5这是定义比率的分隔符。

HTML

<div id="div1">AAA</div>
<div style="position: absolute;">
    <div id="div2" style="position:relative">BBB</div>
</div>

JS

$("#div1").draggable({
    drag: function(event, ui) {
        var offset = ui.offset;
        $("#div2").css({ left : offset.left /2, top: offset.top/0.5});
    }
});

示例:http://jsfiddle.net/jmav/uj6T6/