jqueryui拖动元素多次

Question

how can set up drag and drop to allow dragging of one element multiple times

i have made something like this http://jsfiddle.net/28SMv/3/ but after draging an item from red to blue the element loses its "draggability" and i cant drag it once more and more.

adding revert:true to draggable seems to work but then i need to remove helper:'clone' cant use them at the same time

Answer 1

You're duplicating/cloning your elements, so the new one obviously won't be draggable. You could make it draggable, although that's much too much work. Just move the original via .append() . Note that when you append an existing object to another element, it will remove the original from its place. That seems to me like what you want to do.

Example: http://jsfiddle.net/28SMv/7/

You might want the items to be transferable back into the original div: http://jsfiddle.net/28SMv/8/

Note that I'm using jQuery 1.4.4 there, when you switch over to 1.5 it doesn't work. Not sure if that's a bug, or a feature of jQuery. My guess is that it's a bug of 1.5.

Answer 2

If you drag an item & release without dropping, it stops being draggable. I'd remove all droppable stuff from that jsfiddle example, just put a bunch of draggables on the screen & try with that.

One possible solution is to rebind draggables after you're done dragging. Think:

function rebindDraggables() {
    $('...').draggable({
        ...
        stop: function() {
            rebindDraggables();
        }
    })
}

I'm not sure why in your examples draggables cease to be draggable after the first time. The jQuery docs might explain this.