CODEWITHSUNDEEP
jquery-uijquery-draggablejquery-droppable
Steve
Steve

Reputation: 4908

Can't drag an element that has been dragged

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>

Upvotes: 0

Views: 1481

Answers (2)

Steve
Steve

Reputation: 4908

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.

Upvotes: 0

msapkal
msapkal

Reputation: 8346

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

Upvotes: 1

Related Questions