模拟Windows系统“回收站”

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：

posted on 2016-05-27 16:12 Newbie_小白阅读(227) 评论(0) 收藏举报