third-party/jquery-ui-1.10.2/demos/droppable/photo-manager.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Droppable - Simple photo manager</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.position.js"></script>
   9         <script src="../../ui/jquery.ui.core.js"></script>
  10         <script src="../../ui/jquery.ui.widget.js"></script>
  11         <script src="../../ui/jquery.ui.mouse.js"></script>
  12         <script src="../../ui/jquery.ui.draggable.js"></script>
  13         <script src="../../ui/jquery.ui.droppable.js"></script>
  14         <script src="../../ui/jquery.ui.resizable.js"></script>
  15         <script src="../../ui/jquery.ui.dialog.js"></script>
  16         <link rel="stylesheet" href="../demos.css">
  17         <style>
  18         #gallery { float: left; width: 65%; min-height: 12em; }
  19         .gallery.custom-state-active { background: #eee; }
  20         .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
  21         .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
  22         .gallery li a { float: right; }
  23         .gallery li a.ui-icon-zoomin { float: left; }
  24         .gallery li img { width: 100%; cursor: move; }
  25
  26         #trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
  27         #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
  28         #trash h4 .ui-icon { float: left; }
  29         #trash .gallery h5 { display: none; }
  30         </style>
  31         <script>
  32         $(function() {
  33                 // there's the gallery and the trash
  34                 var $gallery = $( "#gallery" ),
  35                         $trash = $( "#trash" );
  36
  37                 // let the gallery items be draggable
  38                 $( "li", $gallery ).draggable({
  39                         cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  40                         revert: "invalid", // when not dropped, the item will revert back to its initial position
  41                         containment: "document",
  42                         helper: "clone",
  43                         cursor: "move"
  44                 });
  45
  46                 // let the trash be droppable, accepting the gallery items
  47                 $trash.droppable({
  48                         accept: "#gallery > li",
  49                         activeClass: "ui-state-highlight",
  50                         drop: function( event, ui ) {
  51                                 deleteImage( ui.draggable );
  52                         }
  53                 });
  54
  55                 // let the gallery be droppable as well, accepting items from the trash
  56                 $gallery.droppable({
  57                         accept: "#trash li",
  58                         activeClass: "custom-state-active",
  59                         drop: function( event, ui ) {
  60                                 recycleImage( ui.draggable );
  61                         }
  62                 });
  63
  64                 // image deletion function
  65                 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>";
  66                 function deleteImage( $item ) {
  67                         $item.fadeOut(function() {
  68                                 var $list = $( "ul", $trash ).length ?
  69                                         $( "ul", $trash ) :
  70                                         $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
  71
  72                                 $item.find( "a.ui-icon-trash" ).remove();
  73                                 $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
  74                                         $item
  75                                                 .animate({ width: "48px" })
  76                                                 .find( "img" )
  77                                                         .animate({ height: "36px" });
  78                                 });
  79                         });
  80                 }
  81
  82                 // image recycle function
  83                 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>";
  84                 function recycleImage( $item ) {
  85                         $item.fadeOut(function() {
  86                                 $item
  87                                         .find( "a.ui-icon-refresh" )
  88                                                 .remove()
  89                                         .end()
  90                                         .css( "width", "96px")
  91                                         .append( trash_icon )
  92                                         .find( "img" )
  93                                                 .css( "height", "72px" )
  94                                         .end()
  95                                         .appendTo( $gallery )
  96                                         .fadeIn();
  97                         });
  98                 }
  99
 100                 // image preview function, demonstrating the ui.dialog used as a modal window
 101                 function viewLargerImage( $link ) {
 102                         var src = $link.attr( "href" ),
 103                                 title = $link.siblings( "img" ).attr( "alt" ),
 104                                 $modal = $( "img[src$='" + src + "']" );
 105
 106                         if ( $modal.length ) {
 107                                 $modal.dialog( "open" );
 108                         } else {
 109                                 var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
 110                                         .attr( "src", src ).appendTo( "body" );
 111                                 setTimeout(function() {
 112                                         img.dialog({
 113                                                 title: title,
 114                                                 width: 400,
 115                                                 modal: true
 116                                         });
 117                                 }, 1 );
 118                         }
 119                 }
 120
 121                 // resolve the icons behavior with event delegation
 122                 $( "ul.gallery > li" ).click(function( event ) {
 123                         var $item = $( this ),
 124                                 $target = $( event.target );
 125
 126                         if ( $target.is( "a.ui-icon-trash" ) ) {
 127                                 deleteImage( $item );
 128                         } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
 129                                 viewLargerImage( $target );
 130                         } else if ( $target.is( "a.ui-icon-refresh" ) ) {
 131                                 recycleImage( $item );
 132                         }
 133
 134                         return false;
 135                 });
 136         });
 137         </script>
 138 </head>
 139 <body>
 140
 141 <div class="ui-widget ui-helper-clearfix">
 142
 143 <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
 144         <li class="ui-widget-content ui-corner-tr">
 145                 <h5 class="ui-widget-header">High Tatras</h5>
 146                 <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
 147                 <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 148                 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 149         </li>
 150         <li class="ui-widget-content ui-corner-tr">
 151                 <h5 class="ui-widget-header">High Tatras 2</h5>
 152                 <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
 153                 <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 154                 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 155         </li>
 156         <li class="ui-widget-content ui-corner-tr">
 157                 <h5 class="ui-widget-header">High Tatras 3</h5>
 158                 <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
 159                 <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 160                 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 161         </li>
 162         <li class="ui-widget-content ui-corner-tr">
 163                 <h5 class="ui-widget-header">High Tatras 4</h5>
 164                 <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
 165                 <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 166                 <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 167         </li>
 168 </ul>
 169
 170 <div id="trash" class="ui-widget-content ui-state-default">
 171         <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
 172 </div>
 173
 174 </div>
 175
 176 <div class="demo-description">
 177 <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
 178 <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
 179 <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
 180 </div>
 181 </body>
 182 </html>