如何移動第二個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拖動的速度相同？

回答

相關問題