若要模拟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. Pandas 常见的基本方法

    说明:文章所有内容均截选自实验楼教程[Pandas 使用教程],想要查看教程完整内容,点击教程即可~ 前言: Pandas 是非常著名的开源数据处理工具,我们可以通过它对数据集进行快速读取.转换.过滤 ...

  2. cocos2dx 3.x 网络循环接收数据(RakNet::Packet* packet)单步网络接收

    void FriendFightLayer::update(float dt) { dealWithPacket(dt); if (m_isNeedSwitchToLobby) { PublicMet ...

  3. Sql之left join（左关联）、right join（右关联）、inner join（自关联）的区别

    参考:https://blog.csdn.net/hj7jay/article/details/51749863

  4. RabbitMQ的使用场景

    RabbitMQ的使用场景   1 大数据日志收集消息中间件应用场景     2 消息中间件在搜索系统DIH(伪实时)中的应用       伪实时的搜索系统:   后台系统:(作为生产者发送消息)   ...

  5. Vue系列之 => 结合ajax完成列表增删查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue系列之 => 全局，私有过滤器

    私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...

  7. C#基本知识零散总结

    C#基本知识零散总结 类的属性:(property) C#中定义属性使用的语法 public string SomeProperty { get { return "属性的值"; ...

  8. 20155228 2016-2017-2 《Java程序设计》第3周学习总结

    20155228 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 认识对象 类与对象 类和对象的关系:类是对象的设计图,对象是类的实例 参考:将"名 ...

  9. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  10. 四则运算 python

    2018103004四则运算练习软件项目报告   此作业的要求参见链接的任务三个人任务:https://mooc1-1.chaoxing.com/mycourse/studentstudy?chapt ...