利用jquery插件中的拖拽与放置实现的相册效果，可以删除和恢复

最新推荐文章于 2021-06-20 00:36:20 发布

coder_up

最新推荐文章于 2021-06-20 00:36:20 发布

阅读量7.1k

点赞数 7

分类专栏： jquery 文章标签：相册 jquery插件 class image function delete

本文链接：https://blog.csdn.net/wjc19911118/article/details/7413351

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

该效果为官方提供，本人只是进行了一下翻译，加了些详细注释供大家参考，对大家有帮助就ok了，如有解释错误谢谢提出。

以下是需要引入的一些文件，如果没有您可以通过给定的地址进行下载，谢谢：

jquery-1.7.1.min.js http://jqueryui.com/

jquery-ui-1.8.18.custom.min.js http://jqueryui.com/download

jquery.ui.datepicker-zh-CN.js 该文件在下载好的第二个文件的该目录下： jquery-ui-1.8.18.custom\development-bundle\ui\i18n\

/jquery-ui-1.8.18.custom.css 该文件在下载好的第二个文件的该目录下： jquery-ui-1.8.18.custom\css\ui-lightness\

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Simple photo manager</title>
<!--引入jquery类库文件  必须要有顺序-->
<script type="text/javascript" language="javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" language="javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->

<link type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.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() {
		// 获取相册ul的id转换为jquery对象
		var $gallery = $( "#gallery" ),
		// 获取垃圾箱的id转换为jquery对象
			$trash = $( "#trash" );

		// 实现相册（li）的可拖拽效果
		$( "li", $gallery ).draggable({
			//点击图片不能被触发
			cancel: "a.ui-icon", 
			//当不被拖拽时图片会自动的返回到原来的位置，（除非到了垃圾箱中则不会被返回）
			revert: "invalid", 
			//设置相册可被拖拽到的区域，可以是指定某个元素内，也可以是document,parent
			containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", 
			//设置图片可以被克隆
			helper: "clone",
			//当鼠标放上去的时候鼠标变为移动的样式
			cursor: "move",
			//设置相册被拖拽时的透明度
			opacity:0.6
		});

		//设置该垃圾箱为一个可放置的区域，用来接收相册（li）
		$trash.droppable({
			//设置允许接收的内容为指定的内容
			accept: "#gallery > li",
			//当接收的对象在被拖拽时，设置该垃圾箱的css样式
			activeClass: "ui-state-highlight",
			//当被拖拽目标完全进入指定的容器内内部时触发的函数（经过测试该完全进入是指被拖拽目标的1/2进入指定区域即可）
			drop: function( event, ui ) {
				//调用删除事件，删除被拖拽对象原始位置的图像
				deleteImage( ui.draggable );
			}
		});

		//设置相册也为为一个可放置的区域，用来接收相册垃圾箱中的被回收的相册（可直接拖拽）
		$gallery.droppable({
			//设置该地点所能被允许放置的内容为垃圾箱中的相册（li）
			accept: "#trash li",
			//当接收的对象在被拖拽时，设置相册的css样式
			activeClass: "custom-state-active",
			//当被拖拽目标完全进入指定的容器内内部时触发的函数（经过测试该完全进入是指被拖拽目标的1/2进入指定区域即可）
			drop: function( event, ui ) {
				//当相册从垃圾箱被拖出到指定区域时调用该函数，把被拖拽元素的对象传过去
				recycleImage( ui.draggable );
			}
		});

		//创建一个还原图标
		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>";
		//删除相册的函数，接收一个被删除的元素（li）对象
		function deleteImage( $item ) {
			//给该图片加上淡出效果，并添加到垃圾箱中
			$item.fadeOut(function() {
				//查找该垃圾箱（div）是否有ul,如果有则不需要在创建
				var $list = $( "ul", $trash ).length ? $( "ul", $trash ) :
					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
					//将放入回收站的图片的删除按钮去掉
				$item.find( "a.ui-icon-trash" ).remove();
				//将删除图标的位置改变为还原的图标，添加到回收站中，并向内淡入，同时改变li宽度大小为48,图片宽度大小为36
				$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='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
		//该函数的作用是，还原垃圾箱中的被删除的相册，接收的参数是一个该li元素对象
		function recycleImage( $item ) {
			//将该li加上淡出效果
			$item.fadeOut(function() {
				$item    //查找刷新按钮并删除，
					.find( "a.ui-icon-refresh" )
						.remove()
					//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
					.end()     
					//改变li的大小为96
					.css( "width", "96px")
					//添加删除图标
					.append( trash_icon )
					//将该li下的img的高度设置为72
					.find( "img" )
						.css( "height", "72px" )
					//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
					.end()
					//并同时添加到ul相框中
					.appendTo( $gallery )
					//加上淡入的效果,只要是显示函数就可以，比如show
					.fadeIn();
			});
		}

		//图片显示函数（放大图片），弹出一个对话框作为窗口
		function viewLargerImage( $link ) {
			var src = $link.attr( "href" ),
				title = $link.siblings( "img" ).attr( "alt" ),
				//在页面中查找img标签中src属性以src结尾的图片
				$modal = $( "img[src$='" + src + "']" );
			if ( $modal.length ) {
				//如果该图片有就直接打开一个对话框，否则要创建该图片
				$modal.dialog( "open" );
			} else {
				//创建一个img元素
				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 ) {
			//$item保存的是某个li
			var $item = $( this );
			//$target保存的是具体到点击的图标
				$target = $( event.target );
				//alert(event.html());
				//根据该$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;
		});
	});
//注意：垃圾箱中的ul和相册中的ul的id都必须是一样的！
//如果要增加一个相册图片只需要增加一个相同的li就好了，只需修改以下图片的名字就好了，并且图片必须是一样两张，high_tatras.jpg   high_tatras_min.jpg
	</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>
    <li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras5_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras5.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_tatras6_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras6.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>

图片的结构图：

项目效果图：

coder_up

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
利用jquery插件中的拖拽与放置实现的相册效果，可以删除和恢复

该效果为官方提供，本人只是进行了一下翻译，加了些详细注释供大家参考，对大家有帮助就ok了，如有解释错误谢谢提出。以下是需要引入的一些文件，如果没有您可以通过给定的地址进行下载，谢谢：jquery-1.7.1.min.js http://jqueryui.com/jquery-ui-1.8.18.custom.min.js
复制链接

扫一扫