jqueryui 拖拽

来源：互联网发布：tomcat连不上mysql 编辑：程序博客网时间：2024/05/29 23:24
<!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.10.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; }.gallery.custom-state-active { background: #eee; }.gallery li { float: left; width: 96px; padding: 0.4em; margin: 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; }.selected {border: 1px solid orange;}#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }#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" ).draggable({addClasses: false,cancel: "a.ui-icon", // clicking an icon won't initiate draggingrevert: "invalid", // falsehandle: "img",helper: function() {$(this).addClass("selected");//TODO 別フレームorangeをクリアreturn $("<ul class='ui-helper-reset' style='width: 400px;'/>").append($( "li.selected" ).clone());},opacity: 0.6,cursor: "move",delay: 200, // ドラッグを開始するまでの時間をミリ秒で指定します。distance: 5, // 指定されたpixelを超えたところまで引きずらないと、ドラッグが開始されないようにします。});// let the trash be droppable, accepting the gallery items$trash.droppable({addClasses: false,accept: "ul > li",//greedy: true,drop: function( event, ui ) {deleteImage( ui.draggable );},tolerance: "pointer", //mouse over// over: ぺージンを開始// out: ぺージンを取り消し});// let the gallery be droppable as well, accepting items from the trash$gallery.droppable({accept: "ul > li",addClasses: false,drop: function( event, ui ) {recycleImage( ui.draggable );},tolerance: "pointer", //mouse over});// 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 );} else {$(this).toggleClass("selected");}return false;});});</script></head><body><!-- --><div class="ui-widget ui-helper-clearfix"><!-- overflow: hidden, width: 100px; --><ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"><!-- position: absolute --><li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">High Tatras 1</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>1<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 1</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>2<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 1</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>3<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 1</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>4<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_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>1<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>2<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_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>3<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_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>4<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_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>1<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_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>2<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>3<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_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>4<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_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>1<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_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>2<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_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>3<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>4<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></body></html>
1 0