Jquery Droppable Demo Help

Question

I am testing out the Jquery droppable photo manager demo:

http://jqueryui.com/demos/droppable/#photo-manager

Currently when the photo is deleted it is moved to the trash bin. How can I have it copy the image and move it to the trash bin so that it appears in both places??

This is the code:

<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) {
                    deleteImage(ui.draggable);
                }
            });

            // let the gallery be droppable as well, accepting items from the trash
            $gallery.droppable({
                accept: '#trash li',
                activeClass: 'custom-state-active',
                drop: function(ev, ui) {
                    recycleImage(ui.draggable);
                }
            });

            // image deletion 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 deleteImage($item) {
                $item.fadeOut(function() {
                    var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

                    $item.find('a.ui-icon-trash').remove();
                    $item.append(recycle_icon).appendTo($list).fadeIn(function() {
                        $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
                    });
                });
            }

            // image recycle function
            var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
            function recycleImage($item) {
                $item.fadeOut(function() {
                    $item.find('a.ui-icon-refresh').remove();
                    $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
                });
            }

            // image preview function, demonstrating the ui.dialog used as a modal window
            function viewLargerImage($link) {
                var src = $link.attr('href');
                var title = $link.siblings('img').attr('alt');
                var $modal = $('img[src$="'+src+'"]');

                if ($modal.length) {
                    $modal.dialog('open')
                } else {
                    var img = $('<img alt="'+title+'" width="384" height="288" 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(ev) {
                var $item = $(this);
                var $target = $(ev.target);

                if ($target.is('a.ui-icon-trash')) {
                    deleteImage($item);
                } else if ($target.is('a.ui-icon-zoomin')) {
                    viewLargerImage($target);
                } else if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
                }

                return false;
            });
        });
    </script>

Answer 1

Rewrite function deleteImage($item) so that it the element isn't removed from its original list.

Answer 2

how could that be done?