模拟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;
});
模拟window系统的“回收站”的更多相关文章
- window系统下如何查看so库的信息
转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10458388.html linux系统下能够直接用命令行查看so库的信息,但是window系统下咋办好 ...
- [实战经验]Macbook pro 苹果系统换window系统
1. Macbook的window软件驱动备份 通过Boot Camp助手进行window支持苹果驱动下载 2. 拆机把SSD固态硬盘放在主盘位置,把苹果的机械盘放在光驱位置 ...
- 驾照理论模拟考试系统Android源码下载
驾照理论模拟考试系统Android源码下载 <ignore_js_op> 9.png (55.77 KB, 下载次数: 0) <ignore_js_op> 10.png ...
- 利用qemu模拟嵌入式系统制作全过程
http://www.tinylab.org/using-qemu-simulation-inserts-the-type-system-to-produce-the-whole-process/ 利 ...
- 在window系统下配置login.sql
在window系统下配置login.sql 他的位置是登录用户的文件夹,我的win7系统位置是: C:\Users\Administrator 我的login.sql下载地址: http://file ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- 学习window系统下的注册表
一直不明白注册表是一个什么鬼,查了资料后大概明白了注册表到底有什么用,其实简单来说注册表就是一个存放系统.硬件.应用配置信息的数据ku.##### 一.注册表的来历在最早的视窗操作系统win3.x中, ...
- 如何修改Window系统下PATH路径以及win8下masm32V11
如何修改Window系统下PATH路径 //其实这个都是临时性的, 退出dos窗口就没有用了,只是做个笔记罢了 C:\Users\Administrator> set path=E ...
- 原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
随机推荐
- 部分还款-还款试算接口与还款接口-python
一.还款试算.还款接口, 1.只传入参数loan_Code 2.还款接口参数化以下: "loanCode": loanCode1,"orderId": orde ...
- [LeetCode] 276. Paint Fence_Easy tag: Dynamic Programming
There is a fence with n posts, each post can be painted with one of the k colors. You have to paint ...
- [LeetCode] 577. Employee Bonus_Easy tag: SQL
Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...
- C++编译变更stlport到使用g++的stl经验总结
. 花了几天时间,需要把经验给记下来. 1. 需要支持C++11的编译器,最方便的方式就是 yum -y install devtoolset-6 在/usr/local/bin中增加gcc6.sh ...
- vue打包后404，webpack配置问题
首先声明这是基于vue2.x的 1. 将其中build的配置项assetsPublicPath进行修改,改为上图-->目的是将资源文件的引入路径,改为相对地址(相对index.html) 2.h ...
- Cocos Creator 动作（动画）笔记
动作cc.ActionInterval 和cc.ActionInstant; var action = cc.moveTo(2, 100, 100); // 创建一个移动动作node.runActio ...
- 原生js---ajax的封装插件.js---（对get和post做了兼容）
function ajax(method,url,data,fn){ // 1.创建对象 var xhr=null; try{ xhr=new XMLHttpRequest(); }catch(e){ ...
- Yii2返回以主键id为键名的数组
branch.php <?php namespace app\models; use Yii; /** * This is the model class for table "bra ...
- Permutation Bo (数学证明)
当在两端时:共有n * (n - 1)种组合,满足条件的有,计算可得, counter = n * (n - 1) / 2. 其他位置时:共有n * (n - 1) * (n - 2) 种组合,满足条 ...
- 为什么我们要使用HTTP Strict Transport Security？
http://www.freebuf.com/articles/web/66827.html