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

            });

模拟window系统的“回收站”的更多相关文章

  1. window系统下如何查看so库的信息

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10458388.html  linux系统下能够直接用命令行查看so库的信息,但是window系统下咋办好 ...

  2. [实战经验]Macbook pro 苹果系统换window系统

    1.       Macbook的window软件驱动备份 通过Boot Camp助手进行window支持苹果驱动下载 2.       拆机把SSD固态硬盘放在主盘位置,把苹果的机械盘放在光驱位置 ...

  3. 驾照理论模拟考试系统Android源码下载

    ‍‍‍驾照理论模拟考试系统Android源码下载 <ignore_js_op> 9.png (55.77 KB, 下载次数: 0) <ignore_js_op> 10.png ...

  4. 利用qemu模拟嵌入式系统制作全过程

    http://www.tinylab.org/using-qemu-simulation-inserts-the-type-system-to-produce-the-whole-process/ 利 ...

  5. 在window系统下配置login.sql

    在window系统下配置login.sql 他的位置是登录用户的文件夹,我的win7系统位置是: C:\Users\Administrator 我的login.sql下载地址: http://file ...

  6. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  7. 学习window系统下的注册表

    一直不明白注册表是一个什么鬼,查了资料后大概明白了注册表到底有什么用,其实简单来说注册表就是一个存放系统.硬件.应用配置信息的数据ku.##### 一.注册表的来历在最早的视窗操作系统win3.x中, ...

  8. 如何修改Window系统下PATH路径以及win8下masm32V11

    如何修改Window系统下PATH路径   //其实这个都是临时性的, 退出dos窗口就没有用了,只是做个笔记罢了   C:\Users\Administrator>    set path=E ...

  9. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

随机推荐

  1. JS 8-5 OOP 实现继承的方式

    function Person(){} function Student(){} Student.prototype = Person.prototype;//此继承方式是错误的,当我们改变Stude ...

  2. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  3. 记录一则expdp任务异常处理案例

    环境:AIX 6.1 + Oracle 10.2.0.4 现象:在XTTS迁移测试阶段,遇到执行几个expdp的导出任务,迟迟没有返回任何信息,对应日志无任何输出,查看任务状态: SQL> se ...

  4. 9.用js制作静态分页

    效果如图: css 代码: #page { text-align: center; } .page { display: inline-block; } .page a { padding: 3px ...

  5. Unity shader学习之阴影

    Unity阴影采用的是 shadow map 的技术,即把摄像机放到光源位置上,看不到的地方就有阴影. 前向渲染中,若一光源开启了阴影,Unity会计算它的阴影映射纹理(shadow map),它其实 ...

  6. idea上将项目上传到github

    1.下载并安装好git,然后配置git的path路径.再配置git的全局用户名和邮箱. 2.注册github账号,如果已经有github账号,则此步骤可以省略. 3.在idea中配置git,配置如下: ...

  7. SVN windows内修改日志内容(错误解决)

    在我的电脑是windows 7,使用TortoiseSVN客户端,选中代码目录,点击右键,选择<显示日志> 显示日志信息 修改原来的日志信息(在需要修改的版本的日志中点击鼠标右键,显示如下 ...

  8. python3(socket 实现udp，tcp套接字编程)

    #coding=utf-8 #客户端程序TCP 连接 import socket s=socket.socket(socket.AF_INET,socket.SOCK_STREAM) s.connec ...

  9. Sitecore安装（手动方式）

    Sitecore安装 Sitecore提供手动安装压缩包(.zip)和自动安装程序包(.exe),当您运行自动安装程序时,引导界面会指导您一步步进行安装.为了让您更细致的了解Sitecore的安装配置 ...

  10. GO富集分析

    GO的主要用途之一是对基因组进行富集分析.例如,给定一组在特定条件下上调的基因,富集分析将使用该基因组的注释发现哪些GO术语被过度表示(或未充分表示). 富集分析工具    用户可以直接从GOC网站的 ...