Jquery UI Drag Droppable

Jquery UI Drag Droppable

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<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">
        <h5 class="ui-widget-header">High Tatras</h5>
        <img src="http://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg"  alt="The peaks of High Tatras" width="96" height="72" //>
        <a href="http://jqueryui.com/demos/droppable/images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
        <a href="http://jqueryui.com/demos/droppable/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://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg"  alt="The chalet at the Green mountain lake" width="96" height="72" //>
        <a href="http://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
        <a href="http://jqueryui.com/demos/droppable/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://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg"  alt="Planning the ascent" width="96" height="72" //>
        <a href="http://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg" title="View larger image" class="ui-icon...

CSS

body{font-size:11px;margin:12px}

#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; }

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: acceptTrash,
            activeClass: "ui-state-highlight",
            drop: function( event, 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( event, 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" });
                });
            });
        }

...