若要模拟window系统的“回收站”功能，具体的要求如下：
- 对于列表中的图片，可以通过拖动或单击“删除”的链接，以动画的方式移至“回收站”。
- 对于“回收站的图片”，可以通过拖动和单击“还原”的链接，以动画的方式“还原”到图片列表。
最终效果：
在图片列表中，本来当鼠标单击图片时，出现鼠标的移动样式，就可以直接将图片删除拖动到“回收站”，可是不知道为什么还原的实现了，删除的不行。。。。。。当然删除与还原都可以达到其效果。
为了便于实现拖动和拖放的功能，需要引入jQuery UI插件中的js文件：
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
上面导入的js文件中，jquery-ui.js为jQuery UI的核心库，jquery-ui.css为核心样式文件
实现“回收站”，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟window系统的“回收站”</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css"> <script type="text/javascript">
$(function() {
//使用变量缓存DOM对象
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) {
recycleImage(ui.draggable);
}
}); //自定义图片从相册中删除到回收站的函数
var recyclelink = "<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(recyclelink).appendTo($list).fadeIn(function() {
$item
.animate({ width: "61px" })
.find("img")
.animate({ height: "86px" });
});
});
} //自定义图片从回收站还原至相册时的函数
var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";
function recycleImage($item) {
$item.fadeOut(function() {
$item
.find("a.phrefresh")
.remove()
.end()
.css("width", "85px")
.append(trashlink)
.find("img")
.css("height", "120px")
.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")) {
recycleImage($item);
}
return false;
});
});
</script>
</head>
<body>
<div class="phframe">
<!--图片列表-->
<ul id="photo" class="photo" style="display: flex; flex-direction: row;">
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader" style="background-color: #FAEBD7;">java</h5>
<!--图片标题-->
<img src="img/img01.jpg" alt="2006年图书作品" width="85" height="120" />
<!--加载图片-->
<span>2006年</span>
<!--显示图片信息-->
<a href="#" title="放入回收站" class="phtrash" >删除</a>
<!--删除链接-->
</li>
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader" style="background-color: #FAEBD7;">java web</h5>
<img src="img/img02.jpg" alt="2008年图书作品" width="85" height="120" /> <span>2008年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader" style="background-color: #FAEBD7;">java web模块</h5>
<img src="img/img03.jpg" alt="2010年图书作品" width="85" height="120" /> <span>2010年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
</ul>
<!--回收站-->
<div id="trash" class="photoframecontent" style="border: #000000; background-color: #FDDFDF; display: flex; flex-direction: row;">
<h4 class="photoframeheader">回收站</h4> </div> </div>
</body>
</html>
模拟window系统的“回收站.html”
为了获取图片列表和回收站对象：
var $photo = $("#photo");
var $trash = $("#trash");
在$photo对象中查找<li>元素集，然后通过draggleable()方法设置获取的对象可以进行活动：
$("li", $photo).draggable({
revert: "invalid", // 在拖动过程中，停止时将返回原来位置
helper: "clone", //以复制的方式拖动
cursor: "move"
});
实现代码将图片拖入到‘回收站’，主要通过droppable()方法来实现，首先通过accept设置对象$trash的接收对象为‘#photo li’,然后通过drop设置图片拖动到‘回收站’时触发函数deleteImage();
$trash.droppable({
accept: "#photo li",
activeClass: "highlight",
drop: function(event, ui) {
deleteImage(ui.draggable);
}
});
在这里的deleteImage()方法，主要实现将图片从图片列表里删除拖动到'回收站’。
//将回收站中的图片还原至相册
$photo.droppable({
accept: "#trash li",
activeClass: "active",
drop: function(event, ui) {
recycleImage(ui.draggable);
}
});
实现将两个自定义的函数deleteImage（）和recycleImage（）绑定删除和还原事件:
//根据图片所在位置绑定删除或还原事件
$("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")) {
recycleImage($item);
}
return false;
});