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

Question

如果我有 2 <divs> , a 和 b 是绝对定位的独立 div。如果我拖动 DIV B，可以移动到任何地方。如果我拖动 A，那么 DIV B 将移动与 div A 移动相同的偏移量。

然而，尽管能够将 div B 放置在我想要的任何位置，但到目前为止我所知道的是这个。移动 div A 后，div B 会迅速回到 div A 旁边的位置。

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

有没有一种方法可以添加某种“mouseoffset”来使其工作？

Answer 1

试试这个:

$(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 的起始位置，以便下次计算偏移量。