<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Javascript之相册拖动管理</title>

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

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

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

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

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

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

<link rel="stylesheet" type="text/css"

            href="Css/PhotoManage.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">

    <li class="photoframecontent photoframetr">

      <h5 class="photoframeheader">java</h5>

      <!--图片标题-->

      <img src="Images/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">java web</h5>

      <img src="Images/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">java web模块</h5>

      <img src="Images/img03.jpg" alt="2010年图书作品"  width="85" height="120" /> <span>2010年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>

  </ul>

  <!--回收站-->

  <div id="trash" class="photoframecontent">

    <h4 class="photoframeheader">回收站</h4>

  </div>

</div>

</body>

</html>

执行效果图：

Javascript之相册拖动管理的更多相关文章

  1. 深入理解javascript中的焦点管理

    × 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...

  2. javascript中的内存管理和垃圾回收

    前面的话 不管什么程序语言,内存生命周期基本是一致的:首先,分配需要的内存:然后,使用分配到的内存:最后,释放其内存.而对于第三个步骤,何时释放内存及释放哪些变量的内存,则需要使用垃圾回收机制.本文将 ...

  3. JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

    摘要: 作者将自己常用的JavaScript模块分享给大家. 原文:JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

  4. javascript 实现图片拖动

    javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...

  5. 关于Javascript模块化和命名空间管理的问题说明

    最近闲下来的时候,稍微想了想这个问题.关于Javascript模块化和命名空间管理 [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名 ...

  6. javascript中的内存管理

    目录 简介 内存生命周期 JS中的垃圾回收器 引用计数垃圾回收算法 Mark-and-sweep回收算法 调试内存问题 闭包Closures中的内存泄露 javascript中的内存管理 简介 在c语 ...

  7. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  8. JavaScript实现元素拖动性能优化

    前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...

  9. JavaScript学习笔记-商品管理新增/删除/修改功能

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

随机推荐

  1. 用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档.

  2. Spring MVC 的视图转发

    Spring MVC 默认采用的是转发来定位视图,如果要使用重定向,可以如下操作 1.使用RedirectView public ModelAndView login(){ RedirectView ...

  3. windows服务控制类

    /// <summary> /// 服务调用控制 /// </summary> public class WinServiceController { /// <summ ...

  4. node搜索codeforces 3A - Shortest path of the king

    发一下牢骚和主题无关: 搜索,最短路都可以     每日一道理 人生是洁白的画纸,我们每个人就是手握各色笔的画师:人生也是一条看不到尽头的长路,我们每个人则是人生道路的远足者:人生还像是一块神奇的土地 ...

  5. 理解 __declspec(dllexport)和__declspec(dllimport)

    1.解决的问题: 考虑下面的需求,使用一个方法,一个是提供者,一个是使用者,二者之间的接口是头文件.头文件中声明了方法,在提供者那里方法应该被声明为__declspec(dllexport),在使用者 ...

  6. 将Java程序作成exe文件的几种方法【转载】

    看到网上有同志的介绍将Java程序作成exe文件的方法,写的不错,但是也许是这篇文章完成的时间比较早,许多内容已经不合适了.我在这里补充几条: 一.exe4j 说明:exe4j可以将Jar文件制作成e ...

  7. IOS 常用第三方库

    名称 特性 效果图 FXBlurView 实时背景模糊效果   FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...

  8. Ajax条用WebService 5星级

    转:http://www.cnblogs.com/frozenzhang/p/ajax.html 随笔- 2 文章- 0 评论- 5 $.ajax()调用webservice   常规请求基本格式 [ ...

  9. c#线程问题(2)

    表示要在新上下文中调用的方法.public delegate void ContextCallback(Object state) 参数 state 类型: System. Object一个对象,包含 ...

  10. [Effective C++ --030]透彻了解inlining的里里外外

    引言  inline函数 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline函数对编译器而言必须是可见的,以便它能够在调用点内展开该函数.与非inline函 ...