使用JQuery UI插件以拖动的方式管理图片8－9

2019独角兽企业重金招聘Python工程师标准>>>

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JQuery UI插件以拖动的方式管理图片</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="8-9.css">

<script type="text/javascript">
	$(function(){
		var $photo = $("#photo");
		var $trash = $("#trash");
		$("li",$photo).draggable({
			revert:"invalid",
			helper:"clone",
			cursor:"move"
		});

		$trash.droppable({
			accept:"#photo li",
			activeClass:"highlight",
			drop:function(event,ui){
				deleteImage(ui.draggable)
			}
		});

		$photo.droppable({
			accept:"#trash li",
			activeClass:"active",
			drop:function(event,ui){
				recyleImage(ui.draggable);
			}
		});

		var recylelink = "<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";
		function deleteImage($item){
			$item.fadeOut(function(){
				var $list = $("<ul class='photo reset'/>").appendTo($trash);
				$item.find("a.phtrash").remove();
				$item.append(recylelink).appendTo($list).fadeIn(function(){
					$item.animate({width:"100px"}).find("img").animate({height:"100px"});
				});
			});
		}

		var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";
		function recyleImage($item){
			$item.fadeOut(function(){
				$item.find("a.phrefresh").remove().end().css("width","100px").append(trashlink).find("img").css("height","100px").end().appendTo($photo).fadeIn();
			});
		}

		$("ul.photo li").click(function(event){
			var $item = $(this),$target = $(event.target);
			if($target.is("a.phtrash")){
				deleteImage($item);
			}else if($target.is("a.phrefresh")){
				recyleImage($item);
			}
			return false;
		});

		
	});

	
</script>
</head>
<body>
	<div class="phframe">
		<ul id="photo" class="photo">
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片1</h5>
				<img src="../Images/001.gif" alt = "" width="100px" height="100px"/>
				<span>图片1说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片2</h5>
				<img src="../Images/002.gif" alt = "" width="100px" height="100px"/>
				<span>图片2说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
			<li class="photoframecontent photoframetr">
				<h5 class="photoframeheader">图片3</h5>
				<img src="../Images/003.gif" alt = "" width="100px" height="100px"/>
				<span>图片3说明</span>
				<a href="#" title="放入回收站" class="phtrash">删除</a>
			</li>
		</ul>
		<div id="trash" class="photoframecontent">
			<h4 class="photoframeheader">回收站</h4>
		</div>
	</div>
	
</body>
</html>

css代码：

@CHARSET "UTF-8";
body{font-size:11px;font-family:Verdana,Arial,sans-self;}
#photo{
	float:left;width:55%;min-height:12em;padding:0;margin:0px;list-style-type:none;
}
#photo li{
	float:left;width:96px;padding:0.4em;
	margin:0 0.4em 0.4em 0;text-align:center;
}
#photo li h5{
	margin:0 0 0.4em;cursor:move;
}

#photo li span{
	float:left;
}
#photo li a{
	float:right;
}
#photo li img{
	width:98%;cursor:move;border:solid 1px #eee;margin-bottom:3px
}

.phframe{
	width:1000px;	
}
.photoframecontent{
	border:1px solid #ccc;color:#666;
}
.photoframecontent a{
	color:#666;
}
.photoframeheader{
	border:1px solid #ccc;background-color:#ccc;color:#666;font-weight:bold';
}
.photoframeheader a{
	color:#666;
}
.photoframetr{
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;
}


.active{
	background:#eee;
}

.highlight{
	border:1px solid #fcefa1;background:#fbf9ee
}
.reset{
	margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style-:none
}
.phtrash,.phrefresh{
	color:#666;
}

#trash{
	float:right;width:42%;min-height:18em;padding:1%;
}
#trash h4{
	line-height:16px;margin:0 0 0.4em;padding:4px 0px 0px 4px;
}
#trash .photo h5,#trash span{
	display:none;
}

转载于:https://my.oschina.net/u/2552902/blog/543832

使用JQuery UI插件以拖动的方式管理图片8－9

猜你喜欢