Question

If I have 2 divs, DIV A and div b (assume both are absolute positioned).. I want to amke it so that when DIV A’s position changes, DIV B (which is the “child” of div A, event though they are two separate divs, not nested), div B’s position changes with the same offsets that div A did. However if I move DIV B’s position… then just DIV B moveS and DIV A’s position is unaffected.

Change in positon would be by dragging the div for example.

If possible, I would like to be able to make it so that I can have a 3rd div, and say its a “child” of div A or B, and the same action would apply. (Ex1. if div C and B are children of div A, then moving div A would update position of DIV C and B)

Ex2. If div C is child of DIV B, then WHen moving DIVA, DIV B and C would be updated. If just DIVB was moved, then DIV B and C would be updated. If moving DIV C, then only DIV C would be updated.

Update:
Hussein’s code is similar to what I want, but the problem is the div of class .b happens to always snap back to where it originally was as opposed to preserving its current position and adding the offset as .a moves.

Answer 1

Assuming you are using jQuery ui draggable(), use the drag event to achieve this. You may need to modify this code further to suit your needs, but the example below should get you on the right track.

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

Check working example at http://jsfiddle.net/7tDjc/