首页
参考手册
HTML / CSS
HTML
HTML5
CSS
CSS3
Bootstrap3
Bootstrap4
Bootstrap5
Font Awesome
Foundation
JavaScript
JavaScript
HTML DOM
jQuery
AngularJS
AngularJS2
Vue.js
Vue3
React
TypeScript
jQuery UI
jQuery EasyUI
Node.js
AJAX
JSON
Echarts
Chart.js
Highcharts
Google 地图
服务端
Python
Python2.x
Linux
Docker
Ruby
Java
C语言
C++
Perl
Servlet
JSP
Lua
Rust
Scala
Go
PHP
数据结构与算法
Django
Zookeeper
设计模式
正则表达式
Maven
Verilog
ASP
AppML
VBScript
数据库
SQL
MySQL
PostgreSQL
SQLite
MongoDB
Redis
Memcached
数据分析
Python
NumPy
Pandas
Matplotlib
Scipy
R语言
Julia
移动端
Android
Swift
jQuery Mobile
ionic
Kotlin
XML 教程
XML
DTD
XML DOM
XSLT
XPath
XQuery
XLink
XPointer
XML Schema
XSL-FO
SVG
ASP.NET
ASP.NET
C#
Web Pages
Razor
MVC
Web Forms
Web Service
Web Service
WSDL
SOAP
RSS
RDF
开发工具
Eclipse
Git
Svn
Markdown
网站建设
HTTP
网站建设指南
浏览器信息
网站主机教程
TCP/IP
W3C
网站品质
技术文章
CMS建站篇
SEO运营篇
模板下载
文章汇
源代码:
下载代码
点击运行
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 放置(Droppable) - 简单的照片管理器</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.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 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%; } #trash h4 { line-height: 16px; margin: 0 0 0.4em; } #trash h4 .ui-icon { float: left; } #trash .gallery h5 { display: none; } </style> <script> $(function() { // 这是相册和回收站 var $gallery = $( "#gallery" ), $trash = $( "#trash" ); // 让相册的条目可拖拽 $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // 点击一个图标不会启动拖拽 revert: "invalid", // 当未被放置时,条目会还原回它的初始位置 containment: "document", helper: "clone", cursor: "move" }); // 让回收站可放置,接受相册的条目 $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { deleteImage( ui.draggable ); } }); // 让相册可放置,接受回收站的条目 $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { recycleImage( ui.draggable ); } }); // 图像删除功能 var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='还原图像' class='ui-icon ui-icon-refresh'>还原图像</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" }); }); }); } // 图像还原功能 var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='删除图像' class='ui-icon ui-icon-trash'>删除图像</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(); }); } // 图像预览功能,演示 ui.dialog 作为模态窗口使用 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 ); } } // 通过事件代理解决图标行为 $( "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="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="/wp-content/uploads/2014/03/high_tatras_min.jpg" alt="High Tatras 的最高峰" width="96" height="72"> <a href="/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 2</h5> <img src="/wp-content/uploads/2014/03/high_tatras2_min.jpg" alt="绿山湖畔的小屋" width="96" height="72"> <a href="/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 3</h5> <img src="/wp-content/uploads/2014/03/high_tatras3_min.jpg" alt="计划登高" width="96" height="72"> <a href="/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5> <img src="/wp-content/uploads/2014/03/high_tatras4_min.jpg" alt="在 Kozi kopka 的顶部" width="96" height="72"> <a href="/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</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">回收站</span> 回收站</h4> </div> </div> </body> </html>
运行结果: