Drag & Drop jQuery

Report generated based on the icons that have been dropped on the right when button "Generate Report" is pressed. This is an output of the names of the icons that have been dropped on the right in dialogue overlay popup, (i.e the screen goes dark and popup box will have the names of the icons that have been dropped in the right box). The button "Generate Report" will be hidden at first, until an icon has been dragged across and dropped into the right box. And all icons return back to the left when button "Reset" is pressed, ideally animated.

by Faisal Pathan

HTML

<link rel="stylesheet" href="http://hasankhan.co.uk/ao/css/main.css">
<link rel="stylesheet" href="http://hasankhan.co.uk/ao/css/custom-theme/jquery-ui-1.10.3.custom.css">
<script src="http://hasankhan.co.uk/ao/js/jquery-1.9.1.js"></script>
<script src="http://hasankhan.co.uk/ao/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://hasankhan.co.uk/ao/js/vendor/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="http://hasankhan.co.uk/css/normalize.css">
    <body>

        <!-- Add your site or application content here -->
        <div id="container">
            
            <!--header and nav will go here-->
            
            <section>
            	<!--drag from div-->
            	<div class="col1">
                    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
                      <li class="ui-widget-content ui-corner-tr">
                        <h5 class="ui-widget-header">Total Sales</h5>
                          <img src="http://hasankhan.co.uk/ao/img/totalsales.png" alt="Total Sales" width="96" height="72" />
                        <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                      </li>
                      <li class="ui-widget-content ui-corner-tr">
                        <h5 class="ui-widget-header">Availability</h5>
                        <img src="http://hasankhan.co.uk/ao/img/availability.png" alt="Availability" width="96" height="72" />
                        <a href="link/to/transfer/script/when/we/have/js/off" title="Transfer Across" class="ui-icon ui-icon-transferthick-e-w">Transfer Across</a>
                      </li>
                      <li class="ui-widget-content ui-corner-tr">
                        <h5 class="ui-widget-header">Completed</h5>
                        <img src="http://hasankhan.co.uk/ao/img/completed.png" alt="Completed Sales" width="96" height="72" />
...

CSS

#container{width:100%; margin:0 auto; background-color:#999; position:relative; clear:both;}
header{background:url(../img/header-bg.jpg) no-repeat #fff; height:100%;}
#logo{position:relative; float:left; width:126px; height:107px;}
#slogan{float:right;}
#slogan-image{float:right;}
nav{height:30px; background-color:#a4abb1; clear:both; width:100%; margin:0 auto; overflow:hidden;}
nav ul{width:800px; margin:0 auto;}
nav ul li{list-style-type:none; float:left; padding:8px 20px; color:#FFF; font-size:14px; font-weight:lighter; border-left:#FFF solid 1px;}
nav ul li.last{border-right:1px solid #FFF;}
nav ul li:hover{background-color:#333; cursor:pointer;}
nav a{color:#FFF; text-decoration:none;}

section .col1{width: 55%; float:left; background:#dcdcdc; border-radius:5px; margin-top:40px; min-height:250px;}
section .col2{width: 40%; float:right; background:#dcdcdc; border-radius:5px; margin-top:40px; padding:1%;}

section .col3{width: 55%; float:right; margin-top:10px; clear:both;}

.gallery.custom-state-active { background: #eee;}
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0.4em 0.4em; 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; }
 
#transfer { float: right; width: 100%; min-height: 250px; }
#transfer h4 { line-height: 16px; margin: 0 0 0.4em; }
#transfer h4 .ui-icon { float: left; }
#transfer .gallery h5 { display: none; }
  
button{display:block; margin-top:20px; width:200px;}

JavaScript

$(function() {
            // there's the gallery and the transfer
            var $gallery = $( "#gallery" ),
              $transfer = $( "#transfer" );
         
            // 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: "document",
              helper: "clone",
              cursor: "move"		  
            });
         
            // let the transfer be droppable, accepting the gallery items
            $transfer.droppable({
              accept: "#gallery > li",
              activeClass: "ui-state-highlight",
              drop: function( event, ui ) {
                deleteImage( ui.draggable );
              }
            });
         
            // let the gallery be droppable as well, accepting items from the transfer
            $gallery.droppable({
              accept: "#transfer li",
              activeClass: "custom-state-active",
              drop: function( event, ui ) {
                recycleImage( ui.draggable );
              }
            });
    
    $('button.generate').click(function() {
        var content = $('ul li h5', $transfer).map(function(i, v) {
            return $(this).text();
        }).get();
        alert(content.join(','));
    });

    $('button.reset').click(function() {
        $('ul li', $transfer).each(function() {
            recycleImage($(this));
        });
    });
    
    toggleButtons();
         
            // image deletion function
            var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Transfer this icon back' class='ui-icon ui-icon-transfer-e-w'>Transfer this icon back</a>";
            function deleteImage( $item ) {
              $item.fadeOut(function() {
                var $list = $( "ul", $transfer ).length ?
          ...