JQuery-UI Drag, Drop and Re-Drag Clones on Re-Drag
- by amarcy
I am using the following code to extend the JQuery-UI demos included with the download. I am trying to set up a container that the user can drag items into and then move the items around within the container. I incorporated the answer from http://stackoverflow.com/questions/867469/jquery-draggable-clone which works with one problem.
<script>
$(document).ready(function() {
$("#droppable").droppable({
accept: '.ui-widget-content',
drop: function(event, ui) {
if($(ui).parent(":not(:has(#id1))")){
$(this).append($(ui.helper).clone().attr("id", "id1"));
}
$("#id1").draggable({
containment: 'parent',
});
}
});
$(".ui-widget-content").draggable({helper: 'clone'});
});
</script>
div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
When an item is dropped onto the droppable container it can be dragged one time and when it is dropped after that drag it loses its dragging capability.
How do I allow for the item to be dragged multiple times after it has been added to the droppable container?
