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;
}