Question

So I am trying to transfer over a div from one connected sortable container to another using jQuery UI. This sounds simple although I’m trying to do this while the content area is sliding over to the next area (think iPad/iPhone springboard).

The problem is when dragging the div containers over, they lose there positioning, so the dragging over becomes ‘jumpy’ as it does not stay in one place.

Here is what I have so far: (try dragging a block over to the right and you will see the problem)

UPDATE: Na7coldwater has said to give a position:absolute; which has helped the issue, but the block still disappears during animation.

http://jsfiddle.net/Az5kw/16/

What I’m aiming for in the end is to have the blocks to be spaced out in a grid type layout with a maximum value, say 4 per area. Then, a new slide area should be created if necessary (e.g. there is no more space for the blocks, a 3rd slide area will appear). Obviously I’m along way off from this as I can’t even figure out how to move the blocks from area to area in a stable, smooth way!

Been at this for over a week now and am getting nowhere :/

If you know of a better, more stable way of approaching this while still using jQuery that would be amazing!

Any help would be really, really appreciated!

Many thanks

Answer 1

Use the start/stop events of the draggable to set/unset position:fixed on the moving .block.

This way you disassociate it from the containers (in terms of positioning) while dragging.

Add

    start: function(event,ui){
        $(this).addClass('in-orbit');
    },
    stop: function(event,ui){
        $(this).removeClass('in-orbit');
    }

to the options of the draggable, and a css rule

.in-orbit{
    position:fixed!important;
}

---

demo at http://jsfiddle.net/gaby/tktGA/1/