如何移动第二个div的速度与第一个div jquery UI拖动的速度相同？

如果我有是独立的div是绝对定位2 <divs>，a和b。如果我拖动DIV B，可以在任何地方移动。如果我拖累了A，那么DIV B就用相同的DIV A.如何移动第二个div的速度与第一个div jquery UI拖动的速度相同？

移动偏移，将我所知道的，到目前为止是这样的，但是尽管是能够在任何地方我想放在格B中。在移动DIV A，DIV乙只扣回的地方旁边的div元素..

$('.a, .b').draggable({ 
    drag: function(event, ui) { 
     $('.a').css({ 
      top: ui.offset.top + 'px', 
      left: ui.offset.left + 100 + 'px' 
     }); 
    } 
});

有没有一种方法，我可以添加某种“mouseoffset”，使这项工作？

来源

2011-04-30 Tesselate

试试这个：

$(function(){ 
    $('.a, .b').draggable({ 
     start: function(){ 
      if($(this).hasClass('b')){ 
       var p = $(this).position(); 
       $(this).data('lastLeft',p.left); 
       $(this).data('lastTop',p.top); 
      } 
     }, 
     stop: function(){ 
      if($(this).hasClass('b')){ 
       $(this).removeData('lastLeft'); 
       $(this).removeData('lastTop'); 
      } 
     }, 
     drag: function(event, ui) { 
      if($(this).hasClass('b')){ 
       var p = $(this).position(); 
       $(this).data('lastLeft',p.left); 
       $(this).data('lastTop',p.top); 

       var dx = ui.position.left - $(this).data('lastLeft'); 
       var dy = ui.position.top - $(this).data('lastTop'); 
       $('.a').each(function(){ 
        var p = $(this).position(); 
        $(this).css({ 
         left: (p.left + dx) + "px", 
         top: (p.top + dy) + "px" 
        }); 
       }); 
      } 
     } 
    }); 
});

工作jsfiddle演示：http://jsfiddle.net/dkJFh/1/

它基本上保存B的开始位置在每个鼠标移动，因此它可以计算下一次的偏移量。

来源

2011-04-30 09:25:49 DarthJDG

请检查。这可以解决你的问题我想：

$('#div1').draggable({ 
     drag: function(event, ui) { 
     $('#div2').css({ 
      top: ui.offset.top + 'px', 
      left: ui.offset.left + 100 + 'px' 
     }); 
    } 
});

来源

2011-04-30 09:19:52 thecodeparadox

不错的尝试，但并不完全。请注意，当你移动你DIV1移动DIV2后某处，DIV2弹回其连接到DIV1原来的地方......真正的解决办法有DIV2呆在原地其在徘徊无论它被移动，但移动DIV1时，DIV2将移动相同的偏移div1移动了。尽管这是一个开始。 – Tesselate 2011-04-30 13:38:18

你可以通过稍微不同的想法来达到理想的效果。 A内嵌套B就让你这样做很容易（IE的解决办法仍然）：

HTML：

<div class='a' style="position:relative;"> 
    <p>div A</p> 
    <div class='b' style="position:absolute;">div B</div> 
</div>

JAVASCRIPT：

$('.a, .b').draggable({ 
}); 
// IE sucks, so must prevent bubbling on inner div else both divs 
// become draggable with strange results 
$('.b').mousedown(function(e) { 
    if($.browser.msie) { 
     e.stopPropagation(); 
    } 
});

来源

2011-04-30 09:24:37 squidbe

如何移动第二个div的速度与第一个div jquery UI拖动的速度相同？

回答

相关问题