1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Javascript之相册拖动管理</title>
  5. <script type="text/javascript" src="jquery-1.10.2.js"></script>
  6. <script type="text/javascript" src="jquery.ui.core.js"></script>
  7. <script type="text/javascript" src="jquery.ui.widget.js"></script>
  8. <script type="text/javascript" src="jquery.ui.mouse.js"></script>
  9. <script type="text/javascript" src="jquery.ui.draggable.js"></script>
  10. <script type="text/javascript" src="jquery.ui.droppable.js"></script>
  11. <link rel="stylesheet" type="text/css"
  12.             href="Css/PhotoManage.css" />
  13. <script type="text/javascript">
  14.         $(function() {
  15.             //使用变量缓存DOM对象
  16.             var $photo = $("#photo");
  17.             var $trash = $("#trash");
  18.  
  19.             //可以拖动包含图片的表项标记
  20.             $("li", $photo).draggable({
  21.                 revert: "invalid", // 在拖动过程中，停止时将返回原来位置
  22.                 helper: "clone", //以复制的方式拖动
  23.                 cursor: "move"
  24.             });
  25.  
  26.             //将相册中的图片拖动到回收站
  27.             $trash.droppable({
  28.                 accept: "#photo li",
  29.                 activeClass: "highlight",
  30.                 drop: function(event, ui) {
  31.                     deleteImage(ui.draggable);
  32.                 }
  33.             });
  34.  
  35.             //将回收站中的图片还原至相册
  36.             $photo.droppable({
  37.                 accept: "#trash li",
  38.                 activeClass: "active",
  39.                 drop: function(event, ui) {
  40.                     recycleImage(ui.draggable);
  41.                 }
  42.             });
  43.  
  44.             //自定义图片从相册中删除到回收站的函数
  45.             var recyclelink = "<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";
  46.             function deleteImage($item) {
  47.                 $item.fadeOut(function() {
  48.                     var $list = $("<ul class='photo reset'/>").appendTo($trash);
  49.                     $item.find("a.phtrash").remove();
  50.                     $item.append(recyclelink).appendTo($list).fadeIn(function() {
  51.                         $item
  52.                         .animate({ width: "61px" })
  53.                         .find("img")
  54.                         .animate({ height: "86px" });
  55.                     });
  56.                 });
  57.             }
  58.  
  59.             //自定义图片从回收站还原至相册时的函数
  60.             var trashlink = "<a href='#' title='放入回收站' class='phtrash'>删除</a>";
  61.             function recycleImage($item) {
  62.                 $item.fadeOut(function() {
  63.                     $item
  64.                     .find("a.phrefresh")
  65.                     .remove()
  66.                     .end()
  67.                     .css("width", "85px")
  68.                     .append(trashlink)
  69.                     .find("img")
  70.                     .css("height", "120px")
  71.                     .end()
  72.                     .appendTo($photo)
  73.                     .fadeIn();
  74.                 });
  75.             }
  76.  
  77.             //根据图片所在位置绑定删除或还原事件
  78.             $("ul.photo li").click(function(event) {
  79.                 var $item = $(this),
  80.                 $target = $(event.target);
  81.                 if ($target.is("a.phtrash")) {
  82.                     deleteImage($item);
  83.                 } else if ($target.is("a.phrefresh")) {
  84.                     recycleImage($item);
  85.                 }
  86.                 return false;
  87.             });
  88.         });
  89. </script>
  90. </head>
  91. <body>
  92. <div class="phframe">
  93.   <!--图片列表-->
  94.   <ul id="photo" class="photo">
  95.     <li class="photoframecontent photoframetr">
  96.       <h5 class="photoframeheader">java</h5>
  97.       <!--图片标题-->
  98.       <img src="Images/img01.jpg" alt="2006年图书作品" width="85" height="120" />
  99.       <!--加载图片-->
  100.       <span>2006年</span>
  101.       <!--显示图片信息-->
  102.       <a href="#" title="放入回收站" class="phtrash">删除</a>
  103.       <!--删除链接-->
  104.     </li>
  105.     <li class="photoframecontent photoframetr">
  106.       <h5 class="photoframeheader">java web</h5>
  107.       <img src="Images/img02.jpg" alt="2008年图书作品"  width="85" height="120" /> <span>2008年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
  108.     <li class="photoframecontent photoframetr">
  109.       <h5 class="photoframeheader">java web模块</h5>
  110.       <img src="Images/img03.jpg" alt="2010年图书作品"  width="85" height="120" /> <span>2010年</span> <a href="#" title="放入回收站" class="phtrash">删除</a> </li>
  111.   </ul>
  112.   <!--回收站-->
  113.   <div id="trash" class="photoframecontent">
  114.     <h4 class="photoframeheader">回收站</h4>
  115.   </div>
  116. </div>
  117. </body>
  118. </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. 决定如何开发你的WordPress主题框架

    在本系列教程的第一部分,我介绍了不同类型的主题框架并解释了它们是如何工作的. 在你开始建立你的主题框架之前,你需要考虑它是如何工作的,以及它将会被用来做什么,这样你才能从一开始就找到最合适的开发途径. ...

  2. python求3的倍数与和

    suqares=[] i=1 sum=0 while i<=100: i+=1 if i*3: sum=sum+i # print(i) suqares.append(i*3) # print( ...

  3. iOS 小知识-tips

    --->1<--- arc的项目中使用非arc代码,则添加-fno-objc-arc: 非arc项目中使用arc代码,则添加-fobjc-arc. --->2<--- 实用的类 ...

  4. java对象转JSON JS取JSON数据

    JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter() { @Override ...

  5. C++转义字符 &amp; keyword

    转义字符: 换行符 \n   水平制表符\t 纵向制表符 \v 退格符 \b 回车符 \r   进纸符 \f 报警(响铃)符 \a 反斜线 \\ 疑问号 \? 单引號 \' 双引號 \"   ...

  6. QM课程03-采购中的质量管理

    QM模块被包含于采购过程的下列决策制定阶段:查询.供应商选择.采购订单.货物订单.收货.收到检查和收货数量的下达. 供应商下达 质量部门为一种被指定的物料下达一个供应商,它可以限制或限定下达的数量.如 ...

  7. Codeforces Round #327 (Div. 2) A. Wizards' Duel 水题

    A. Wizards' Duel Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/591/prob ...

  8. 04.URL路径访问与模块控制器之间的关系

    <?php //初使化,进行加载. //通过这个英文名来了解,他是定义的与thinkphp有关的核心框架文件目录路径 //他可以通过这一个常量,在以后运行的时候都去找这个路径,确保在运行过程当, ...

  9. Java log code example

    Java log example Logrecord filter import java.util.logging.Filter; import java.util.logging.Level; i ...

  10. [Jest] Test JavaScript with Jest

    Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Fac ...