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.
//TRASH CAN
$(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 ).