Can't drag an element that has been dragged

Question

I have a simple drag and drop situation at http://jsfiddle.net/stevea/zPPPV/3/. If you drag and drop the green box the drop handler clones the dragged object and insert it into the red box at the xy where the drop occurred. The green boxes have absolute positioning and the clone is given the offset at the drop point.

Dragging and dropping the box once works ok, but I can't drag and drop the the new box that was cloned and inserted, even though Firebug shows that it has the ui-draggable class.

Does anyone see the problem?

Thanks.

Apparently I need to show some code since I referenced a jsfiddle:

<div id="red">
    <div id="box_green" class="green"></div>  
</div>

score 1 · Answer 1 · answered Apr 10 '13 at 12:03

1

There is no direct way to do this. Check this out.

    $('#orangeBox').draggable({
        opacity:'0.5', 
        helper:'clone',
        revert : 'invalid'
    });   
    $('#page').droppable({
        accept:'#orangeBox',
        drop: function( event, ui ) {
            $(this).after($(ui.helper).clone());
        }
    });

DEMO

answered Apr 10 '13 at 12:03

msapkal

8,268
2
31
48

So sorry! The link above is to the wrong jsfiddle! Let me rebuild it and get a proper link. Be back in a few minutes . . . – Steve Apr 10 '13 at 15:28
Ok. It's done the jsfiddle is at http://jsfiddle.net/stevea/zPPPV/3/. I also changed the link in the original post so now both these comments can be ignored. (Sorry for the mixup.) – Steve Apr 10 '13 at 15:52

score 0 · Answer 2 · answered Apr 10 '13 at 16:47

0

I found the answer. Once you clone an item and drop it - it is no longer bound to the draggable function, so changing the last line to

.prependTo('#red').draggable({opacity:'0.5', helper:'clone'});

does the trick.

answered Apr 10 '13 at 16:47

Steve

4,534
9
52
110

Can't drag an element that has been dragged

2 Answers2