Question

If I have 2 <divs>, a and b that are separate divs that are absolute positioned. If I drag DIV B, can move anywhere. If I drag A, then DIV B will move by the same offset as that moved by div A.

What I know so far is this, however, despite being able to place div B anywhere I want. Upon moving div A, div B just snaps back to the place next to div A..

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

Is there a way I can add some kind of “mouseoffset” to make this work?

Answer 1

Try this:

$(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"
                    });
                });
            }
        }
    });
});

Working jsfiddle demo: http://jsfiddle.net/dkJFh/1/

It basically saves the start position of B on every mousemove so it can calculate the offset next time.