How to style the dropped list in the trash bin while the draggable is a clone

How to style the dropped list in the trash bin while the draggable is a clone

I am developing a visual selector for compound library using the JQuery UI droppable photo manager demo as a basis.  To prevent the original draggable from being deleted, I have set the draggable.helper class to "clone", and have modified the selectImage function's input to (ui.helper).    The only problem for this modification is that the cloned list element is not placed in order (float to left) in my selection bin and can be stacked randomly depending on where you drop it.  It is not the case when I change the input for selectImage function  to ui.draggable.  I have tried to style the dropped <ul> and/or <li> element on the fly but has not been successful. Can anyone give a remedy or some suggestions? Many thanks to your help!!

My code is very similar to the original demo (see below)

#############
<meta charset=utf-8"/>
<title>JQuery UI Dropper - Fragment CheeryPicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.lazyload.js?v=1.8.3" charset="utf-8"></script>
<script src="jquery.scrollstop.js" type="text/javascript" charset="utf-8"></script>
<style>
  
   #library {
     float: left;
     width: 67%;
     min-height: 12em;
     overflow: scroll;
   }
  
   .gallery.custom-state-active { background: #eee; }
   .gallery li { float: left; width: 62px; padding: 0.2em; margin: 0 0.2em 0.2em 0; text-align: center; }
   .gallery li a { float: right; }
   .gallery li a.ui-icon-zoomin { float: left; }
   .gallery li img { width: 100%; cursor: move; }
  
   #selBin { float: right; width:30%; min-height:18em; padding: 1%;}
   #selBin h4 { line-height: 16px; margin: 0 0 0.4em; }
   #selBin h4 .ui-icon { float: left; }
</style>

<script>

  $(function() {
  //there is the source plate(gallery) and the selection bin
    var $gallery = $("#library"), $bin=$("#selBin");
 
  //let the gallery items be draggable
    $("li", $gallery).draggable({
       cancel: "a.ui-icon",
       revert: "invalid",
       containment: "document",
       helper: "clone",
       cursor: "move"
    });

  //Let the selection bin be droppable, accpeting the gallery items
    $bin.droppable({
       accept: "#library > li",
       activeClass: "ui-state-highlight",
       drop: function( event, ui) {
          selectImage(ui.helper);
       }
    });
   
    $gallery.droppable({
       accept: "#selBin li",
       activeClass: "custom-state-active",
       drop: function( event, ui ) {
         recycleImage( ui.helper );
       }
     });
  
  //image selection function
    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
    function selectImage($item) {  
      $item.fadeOut(function() {
        var $list =$("ul", $bin).length ?
          $( "ul", $bin) :
          $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($bin);
         
        $item.find( "a.ui-icon-cart" ).remove();   
        $item.append(recycle_icon).appendTo($list).fadeIn(function() {
           $item
              .animate({
               width: "48px" })
              .find( "img" )
              .animate({ height: "36px" });          
         
        });
      });
    }

  //image recycle function
    var shop_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Select this image' class='ui-icon ui-icon-cart'>select</a>";
    function recycleImage( $item ) {
      $item.fadeOut(function() {
        $item
           .find("a.ui-icon-refresh").remove()
           .end()
           .css("width", "62px")
           .append(shop_icon)
           .find("img").css("height", "62px")
           .end()
           .appendTo($gallery)
           .fadeIn();
      });
    }
   
   
    // image preview function, demonstrating the ui.dialog used as a modal window
    function viewLargerImage($Link) {
      var src =$link.attr( "href"),
          title= $link.siblings("img").attr("alt"),
          $modal = $( "img[src$='" + src + "']" );
         
       if ($modal.length) {
             $modal.dialog("open");
          } else {
            var img =$( "<img alt='" + title + "' width='256' height='256' style='display: none; padding: 8px;' />" )
               .attr( "src", src ).appendTo( "body" );
             setTimeout(function() {
               img.dialog({
                 title: title,
                 width: 400,
                 modal: true
              });
            }, 1 );
         }
     }
     
     // resolve the icons behavior with event delegation
     $( "ul.gallery > li" ).click(function( event ) {
         var $item = $( this ),
         $target = $( event.target );
         if ( $target.is( "a.ui-icon-cart" ) ) {
            selectImage( $item );
         } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
            viewLargerImage( $target );
         } else if ( $target.is( "a.ui-icon-refresh" ) ) {
            recycleImage( $item );
         }
         return false;
      });
   
});
</script>