模拟Windows系统“回收站”

最新推荐文章于 2020-02-23 10:17:38 发布

bangxionger9224

最新推荐文章于 2020-02-23 10:17:38 发布

阅读量102

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/5535006.html

版权

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html" ; charset="utf-8"/>
 <title>使用第三方插件</title>
 <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>

 <script type="text/javascript" src="js/jquery-ui.js"></script>


 <script type="text/javascript" src="js/trash.js"></script>
 <link rel=" stylesheet" type="text/css" href="css/index.css"/>
 <link rel=" stylesheet" type="text/css" href="css/jquery-ui.css"/>

</head>

<body>
<div class="phframe">
<!--图片列表-->
 <ul id="photo" class="photo">
 <li class="photoframecontent photoframetr">
 <h5 class="photoframeheader">粉色</h5>
 <img src="img/floower (1).jpg" width="100px" height="100px"/>
 <span>第 1 朵花</span>
 <a href="#" title="放入回收站" class="phtrash">删除</a>
 </li>

 <li class="photoframecontent photoframetr">
 <h5 class="photoframeheader">紫色</h5>
 <img src="img/floower (2).jpg" width="100px" height="100px"/>
 <span>第 2 朵花</span>
 <a href="#" title="放入回收站" class="phtrash">删除</a>
 </li>

 <li class="photoframecontent photoframetr">
 <h5 class="photoframeheader">红色</h5>
 <img src="img/floower (3).jpg" width="100px" height="100px"/>
 <span>第 3 朵花</span>
 <a href="#" title="放入回收站" class="phtrash">删除</a>
 </li>
 </ul>

 <div id="trash" class="photoframecontent">
 <h4 class="photoframeheader">回收站</h4>
 </div>
</div>

</body>

</html>

trash.js：

$(function () {
//使用变量缓存DOM对象
    var $photo = $("#photo");
var $trash = $("#trash");
//可以拖动包含图片的表项标记
 $("li", $photo).draggable({
 revert: "invalid", //在拖动过程中，停止时将返回原来的位置
 helper: "clone", //以复制的方式拖动
 cursor: "move"
 });

//将图片列表的图片拖动到回收站
 $trash.droppable({
 accept: "#photo li",
 activeClass: "heighlight",
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: "100px"})
 .find("img")
 .animate({height: "100px"});
 });
 });
 }

//自定义图片从回收站还原至图片列表时的函数
 var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";

function recycleImage($item) {
$item.fadeOut(function () {
$item
 .find("a.phrefresh")
 .remove()
 .end()
 .css("width", "100px")
 .append(trashlink)
 .find("img")
 .css("height", "100px")
 .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;
 });
});

index.css

@CHARSET "UTF-8";
body {
font-size: 11px;
font-family: Verdana, Arial, sans-self;
}

#photo {
float: left;
width: 55%;
min-height: 12em;
padding: 0;
margin: 0px;
list-style-type: none;
}

#photo li {
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}

#photo li h5 {
margin: 0 0 0.4em;
cursor: move;
}

#photo li span {
float: left;
}

#photo li a {
float: right;
}

#photo li img {
width: 98%;
cursor: move;
border: solid 1px #eee;
margin-bottom: 3px
}

.phframe {
width: 1000px;
}

.photoframecontent {
border: 1px solid #ccc;
color: #666;
}

.photoframecontent a {
color: #666;
}

.photoframeheader {
border: 1px solid #ccc;
background-color: #ccc;
color: #666;
font-weight: bold;
}

.photoframeheader a {
color: #666;
}

.photoframetr {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
}

.active {
background: #eee;
}

.highlight {
border: 1px solid #fcefa1;
background: #fbf9ee
}

.reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style-: none
}

.phtrash,
.phrefresh {
color: #666;
}

#trash {
float: right;
width: 42%;
min-height: 18em;
padding: 1%;
}

#trash h4 {
line-height: 16px;
margin: 0 0 0.4em;
padding: 4px 0px 0px 4px;
}

#trash .photo h5,
#trash span {
display: none;
}

#trash li {
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
list-style: none;}#trash li h5 { margin: 0 0 0.4em; cursor: move;}#trash li span { float: left;}#trash li a { float: right;}#trash li img { width: 98%; cursor: move; border: solid 1px #eee; margin-bottom: 3px}

result：

转载于:https://www.cnblogs.com/theWayToAce/p/5535006.html

bangxionger9224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟Windows系统“回收站”

HTML：<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html" ; charset="utf-8"/> <title>使用第三方插件</title> <script type="tex...
复制链接

扫一扫