jquery clone(true).draggable() not working out...

i have this function that acts like a trash bin in; you can drop items into it, and view what you have thrown away and even remove the items and put them back into the list they came from.

the issue lies in clone(true) / clone() and the cloned item retaining its attributes AND being draggable.

//COPY TO DIV on recycle from trash

$( "Body" ).droppable({ accept: "#savedtrash", drop: function(event, ui){ var restore_trash_to_desktop = confirm(" Are you sure you want to restore selected trash to desktop?"); if(restore_trash_to_desktop){ var text = ui.draggable.clone(true); ui.draggable.remove(); text.insertAfter("div#DesktopIcons > ul:last").draggable().removeAttr("id","savedtrash"); if ( $('#trashcan').children().length > 0 ) { document.getElementById('trashcanimg').src="image.php?width=85&height=95&image=/images/icons/Recycle_Bin_Empty.png"; } } } });
the above code allows an item placed in the trash can ( code below ) to be then placed back in its proper div. however i can’t keep the hfre attribute AND make it draggable.


$(function() { $( "#trashcan" ).droppable({ drop: function( event, ui ) { var text = ui.draggable.clone(true); ui.draggable.remove(); text.detach().css({top: 0, left: 0}).appendTo("#savedtrash"); document.getElementById('trashcanimg').src="image.php?width=85&height=95&image=/images/icons/Recycle_Bin_Full.png"; $( "#savedtrash" ).draggable({ grid: [ 80, 80 ], snap: ".savedtrash", snapMode: "corner" }); } }); });

now, if i change var text = ui.draggable.clone(true); to var text = ui.draggable.clone(); i can drag the div, but it no longer has its href attribute.

there are two issues present i know of that i cant figure out after weeks of reading.

1: the clones going INTO the trash : if there is more than 1 item it drags and drops ALL items.
2: the above described issue: the cloned divs need to retain their href and be draggable independently from each other ( other child divs to its parent ).

Without being able to work with the code I don’t think I can help…

You could try adding ‘deepWithDataAndEvents’ on clone()

.clone(true, true)

the desktop icons


and the trash, its panel included its created with YUI.


Trash Can Items close
			<div class="ft">
			<button id="emptytrash" style="float:right;">Empty Trash</button>

EDIT: With clone(true, true) i get the same results, no longer draggable, but has the href attribute.

Sorry I’m not familiar enough with draggable/droppable to help.

I don’t really understand the need for clone() though

Have you see this example? It seems like what you are trying to do.


Sponsor our Newsletter | Privacy Policy | Terms of Service