Jquery drag and drop content into different divs

[KaliW]

The problem I am having is it is not displaying the images I drag into the boxes, I changed the code to get the ID of the div im trying to drag into and i'm passing it along, if I change the droppableID in my deleteImage function to simply "trash" or "trash2" it works correctly, but why can't I pass it in like i'm doing now?http://jsbin.com/ituxij/4/edittry dragging and dropping into the boxes labeled trash. Javascript\[code\]$(function () { var $gallery = $("#gallery"); var $trash2 = $("#trash2"); var $trash = $("#trash"); $("li", $gallery).draggable({ cancel: "a.ui-icon", revert: "invalid", containment: "document", helper: "clone", cursor: "move" }); $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function (event, ui) { var $droppableId = $(this).attr("id"); deleteImage(ui.draggable, $droppableId); } }); $trash2.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function (event, ui) { var $droppableId = $(this).attr("id"); deleteImage(ui.draggable, $droppableId); } }); $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function (event, ui) { recycleImage(ui.draggable); } }); var recycle_icon = "<a href='' title='' class='ui-icon ui- icon-refresh'>Recycle image</a>"; function deleteImage($item, $droppableId) { $item.fadeOut(function () { alert($droppableId); var $list = $("ul", $droppableId).length ? $("ul", $droppableId) : $("<ul class='gallery ui-helper-reset'/>").appendTo($droppableId); $item.find("a.ui-icon-trash").remove(); $item.append(recycle_icon).appendTo($list).fadeIn(function () { $item.animate({ width: "48px" }).find("img").animate({ height: "36px" }); }); }); }\[/code\]HTML\[code\]<div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras</h5> <img src="http://stackoverflow.com/questions/14389849/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> <a href="http://stackoverflow.com/questions/14389849/images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href="http://stackoverflow.com/questions/14389849/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 2</h5> <img src="http://stackoverflow.com/questions/14389849/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> <a href="http://stackoverflow.com/questions/14389849/images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href="http://stackoverflow.com/questions/14389849/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 3</h5> <img src="http://stackoverflow.com/questions/14389849/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> <a href="http://stackoverflow.com/questions/14389849/images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href="http://stackoverflow.com/questions/14389849/link/to/trash/script/when/we/have/js/off"title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5> <img src="http://stackoverflow.com/questions/14389849/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> <a href="http://stackoverflow.com/questions/14389849/images/high_tatras4.jpg" title="View larger image"class="ui-icon ui-icon-zoomin">View larger</a> <a href="http://stackoverflow.com/questions/14389849/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li> </ul> <div id="trash" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> </div> <div id="trash2" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash2</span> Trash2</h4> </div>\[/code\]