draggable clone event delegation

draggable clone event delegation

Hi All,

My objective is to clone a draggable which result both original and new duplicate draggables still can get drag.
Both still retaining their event handlers.

I googled around and tried event delegation but still don't get it.

I am scoped down photo manager example http://jqueryui.com/demos/droppable/#photo-manager
and use the latest lib : Jquery 1.3.2 & Jquery 1.7.2

$item.clone(true).appendTo($list).fadeIn();
Apparently, the above sentence moved the original draggable($item) not the new cloned one.

Here are my code.
Any tips or hints are greatly appreciate!
<html lang="en">
   <head>
      <title>jQuery UI Droppable - Simple photo manager</title>
      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
      <script type="text/javascript" src="../../ui/ui.core.js"></script>
      <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
      <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
      <link type="text/css" href="../demos.css" rel="stylesheet" />
      <style type="text/css">
         #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; }/*IE6*/
         .gallery.custom-state-active { background: #eee; }
         .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
         .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
         .gallery li a { float: right; }
         .gallery li a.ui-icon-zoomin { float: left; }
         .gallery li img { width: 100%; cursor: move; }

         #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
         #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
         #trash h4 .ui-icon { float: left; }
         #trash .gallery h5 { display: none; }
      </style>
      <script type="text/javascript">
         $(function() {
            // there's the gallery and the trash
            var $gallery = $('#gallery'), $trash = $('#trash');

            // let the gallery items be draggable
            $('li',$gallery).draggable({
               //cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
               revert: 'invalid', // when not dropped, the item will revert back to its initial position
               containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
               helper: 'clone',
               cursor: 'move'
            });

         
            // let the trash be droppable, accepting the gallery items
            $trash.droppable({
               accept: '#gallery > li',
               activeClass: 'ui-state-highlight',
               drop: function(ev, ui) {
                  copyImage(ui.draggable);
               }
            });

            function copyImage($item) {
                  var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
                  $item.clone(true).appendTo($list).fadeIn();            
            }

         });
      </script>
   </head>
   <body>
      <div class="demo ui-widget ui-helper-clearfix">
         <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">         
            <li class="ui-widget-content ui-corner-tr">AAA</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><!-- End demo -->
   </body>
</html>