jQuery draggable moving multiple divs in parallel

Question

I am struggeling with a Javascript/jQuery issue for about two weeks and it drives me insane. I need multiple divs to be draggable inside a container div. If you move one div, the others just move with it, no matter where dropped in the container. Now, there are two issues:

1) the first element is dropped fine, it's upper lefter corner snaps the mouse pointer but this is fine. BUT when dropping more divs, they have an offset to the correct position on the y axis. NOT the x axis, that works. Interestingly, the offset is exactly the height of the red div, 50 pixels. The third dropped div then has an offset of 100 pixels, the fourth 150 pixels, and so on.

2) When dragging one div, the others get an to me unexplainable offset on both x and y coordinates.

Have a look: http://jsfiddle.net/6v3hR/7/

I included the mouse pointer location, this makes for easy debugging/position checking. Since issue 2) occurs in the start function, I output the coordinates to the console. And they are the correct ones! You can check that with the mouse pointer going to the respective position and checking the displayed coordinate pair.

Code explanation:

            start: function () {
            $('.drag_inside').each(function (idx) {
                $(this)[0].originalX = $(this).offset().left;
                $(this)[0].originalY = $(this).offset().top;
                console.log('dragging start originalX ' + idx + ' :' + $(this)[0].originalX);
            });

Every time a red div is dragged in the container div, start is called. Here, I save the position right at the start, so the original position, hence the names originalX and originalY. I put that in the jQuery Object to have it handy in the drag event function:

        drag: function (e, ui) {
            var offsetY = $(this).offset().top - $(this)[0].originalY;
            var offsetX = $(this).offset().left - $(this)[0].originalX;
            $('.drag_inside').each(function (idx) {
                $(this).css({
                    top: $(this)[0].originalY + offsetY,
                    left: $(this)[0].originalX + offsetX
                });
            });
        }

Here, I calculate the offset and update the position of all divs via the each function via the css function. This works actually fine, the painful offset is there, but the movement is truely in parallel.

There is a pluging, multidraggable. It is really nice, but it does not play with the recent jQuery 1.9+ versions.

Any help is sooo much appreciated.

score 0 · Answer 1 · answered Jul 28 '13 at 12:56

0

I may take a closer look, but my first suggestion would be not to calculate offsets with jQuery. That should definitely be done with CSS. Since 90% of your jQuery is in order to accomplish that, I'd say you really overcomplicated your issues here.

answered Jul 28 '13 at 12:56

Ryan Williams

959
7
15

Ok I got it figured out. By trial&error, I have no clue why that is the solution. The problem was, that the css function didn't do what was expected of it. I replaced the css funtion with the offset function and now it works like a charm. With using the ui.offset info, the divs now also do not jump with upper left corner to the mouse pointer but stay exactly where dropped. Thanks anyway Ryan! Updated version: http://jsfiddle.net/6v3hR/8/ – user2627480 Jul 28 '13 at 15:37

jQuery draggable moving multiple divs in parallel

1 Answers1