模拟window系统的“回收站”

若要模拟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;
            });