模拟window系统的“回收站”

最新推荐文章于 2021-12-21 20:35:45 发布

weixin_30635053

最新推荐文章于 2021-12-21 20:35:45 发布

阅读量270

点赞数

文章标签： java ui javascript ViewUI

原文链接：http://www.cnblogs.com/jiguiyan/p/10584289.html

版权

若要模拟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为核心样式文件

实现“回收站”，具体代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5 <title>模拟window系统的“回收站”</title>
  6 <script src="js/jquery-3.2.1.js"></script>
  7 <script src="js/jquery-ui.js"></script>
  8 <link  rel="stylesheet" href="css/jquery-ui.css">
  9 
 10 <script type="text/javascript">
 11         $(function() {
 12             //使用变量缓存DOM对象
 13             var $photo = $("#photo");
 14             var $trash = $("#trash");
 15 
 16             //可以拖动包含图片的表项标记
 17             $("li", $photo).draggable({
 18                 revert: "invalid", // 在拖动过程中，停止时将返回原来位置
 19                 helper: "clone", //以复制的方式拖动
 20                 cursor: "move"
 21             });
 22 
 23             //将相册中的图片拖动到回收站
 24             $trash.droppable({
 25                 accept: "#photo li",
 26                 activeClass: "highlight",
 27                 drop: function(event, ui) {
 28                     deleteImage(ui.draggable);
 29                 }
 30             });
 31 
 32             //将回收站中的图片还原至相册
 33             $photo.droppable({
 34                 accept: "#trash li",
 35                 activeClass: "active",
 36                 drop: function(event, ui) {
 37                     recycleImage(ui.draggable);
 38                 }
 39             });
 40 
 41             //自定义图片从相册中删除到回收站的函数
 42             var recyclelink = "<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";
 43             function deleteImage($item) {
 44                 $item.fadeOut(function() {
 45                     var $list = $("<ul class='photo reset'/>").appendTo($trash);
 46                     $item.find("a.phtrash").remove();
 47                     $item.append(recyclelink).appendTo($list).fadeIn(function() {
 48                         $item
 49                         .animate({ width: "61px" })
 50                         .find("img")
 51                         .animate({ height: "86px" });
 52                     });
 53                 });
 54             }
 55 
 56             //自定义图片从回收站还原至相册时的函数
 57             var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";
 58             function recycleImage($item) {
 59                 $item.fadeOut(function() {
 60                     $item
 61                     .find("a.phrefresh")
 62                     .remove()
 63                     .end()
 64                     .css("width", "85px")
 65                     .append(trashlink)
 66                     .find("img")
 67                     .css("height", "120px")
 68                     .end()
 69                     .appendTo($photo)
 70                     .fadeIn();
 71                 });
 72             }
 73 
 74             //根据图片所在位置绑定删除或还原事件
 75             $("ul.photo li").click(function(event) {
 76                 var $item = $(this),
 77                 $target = $(event.target);
 78                 if ($target.is("a.phtrash")) {
 79                     deleteImage($item);
 80                 } else if ($target.is("a.phrefresh")) {
 81                     recycleImage($item);
 82                 }
 83                 return false;
 84             });
 85         });
 86 </script>
 87 </head>
 88 <body>
 89 <div class="phframe">
 90   <!--图片列表-->
 91   <ul id="photo" class="photo" style="display: flex; flex-direction: row;">
 92     <li class="photoframecontent photoframetr">
 93       <h5 class="photoframeheader" style="background-color: #FAEBD7;">java</h5>
 94       <!--图片标题-->
 95       <img src="img/img01.jpg" alt="2006年图书作品" width="85" height="120" />
 96       <!--加载图片-->
 97       <span>2006年</span>
 98       <!--显示图片信息-->
 99       <a href="#" title="放入回收站" class="phtrash" >删除</a>
100       <!--删除链接-->
101     </li>
102     <li class="photoframecontent photoframetr">
103       <h5 class="photoframeheader" style="background-color: #FAEBD7;">java web</h5>
104       <img src="img/img02.jpg" alt="2008年图书作品"  width="85" height="120" /> <span>2008年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
105     <li class="photoframecontent photoframetr">
106       <h5 class="photoframeheader" style="background-color: #FAEBD7;">java web模块</h5>
107       <img src="img/img03.jpg" alt="2010年图书作品"  width="85" height="120" /> <span>2010年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
108   </ul>
109   <!--回收站-->
110   <div id="trash" class="photoframecontent"  style="border: #000000; background-color: #FDDFDF; display: flex; flex-direction: row;">
111       <h4 class="photoframeheader">回收站</h4>
112       
113   </div>
114   
115 
116 </div>
117 </body>
118 </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;
            });