Blame | Last modification | View Log | RSS feed
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Droppable - Simple photo manager</title><link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"><script src="../../jquery-1.4.2.js"></script><script src="../../ui/jquery.ui.position.js"></script><script src="../../ui/jquery.ui.core.js"></script><script src="../../ui/jquery.ui.widget.js"></script><script src="../../ui/jquery.ui.mouse.js"></script><script src="../../ui/jquery.ui.draggable.js"></script><script src="../../ui/jquery.ui.droppable.js"></script><script src="../../ui/jquery.ui.resizable.js"></script><script src="../../ui/jquery.ui.dialog.js"></script><link rel="stylesheet" href="../demos.css"><style>#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>$(function() {// there's the gallery and the trashvar $gallery = $( "#gallery" ),$trash = $( "#trash" );// let the gallery items be draggable$( "li", $gallery ).draggable({cancel: "a.ui-icon", // clicking an icon won't initiate draggingrevert: "invalid", // when not dropped, the item will revert back to its initial positioncontainment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if presenthelper: "clone",cursor: "move"});// let the trash be droppable, accepting the gallery items$trash.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 trash$gallery.droppable({accept: "#trash li",activeClass: "custom-state-active",drop: function( event, ui ) {recycleImage( ui.draggable );}});// image deletion functionvar 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 functionvar 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().end().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 windowfunction viewLargerImage( $link ) {var src = $link.attr( "href" ),title = $link.siblings( "img" ).attr( "alt" ),$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( event ) {var $item = $( this ),$target = $( event.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></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"><h5 class="ui-widget-header">High Tatras</h5><img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /><a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><a href="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="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /><a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><a href="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="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /><a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><a href="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 4</h5><img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /><a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a></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 --><div class="demo-description"><p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p><p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p><p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p></div><!-- End demo-description --></body></html>