<!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.6.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 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( 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" });
????});
???});
??}
??// 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()
?????.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 window
??function 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>
??
?</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>
??
?</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>
??
?</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>
?
?</li>
</ul>
?
</body>
</html>