Javascript之相册拖动管理
<!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之相册拖动管理的更多相关文章
- 深入理解javascript中的焦点管理
× 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...
- javascript中的内存管理和垃圾回收
前面的话 不管什么程序语言,内存生命周期基本是一致的:首先,分配需要的内存:然后,使用分配到的内存:最后,释放其内存.而对于第三个步骤,何时释放内存及释放哪些变量的内存,则需要使用垃圾回收机制.本文将 ...
- JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏
摘要: 作者将自己常用的JavaScript模块分享给大家. 原文:JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...
- javascript 实现图片拖动
javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...
- 关于Javascript模块化和命名空间管理的问题说明
最近闲下来的时候,稍微想了想这个问题.关于Javascript模块化和命名空间管理 [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名 ...
- javascript中的内存管理
目录 简介 内存生命周期 JS中的垃圾回收器 引用计数垃圾回收算法 Mark-and-sweep回收算法 调试内存问题 闭包Closures中的内存泄露 javascript中的内存管理 简介 在c语 ...
- html+javascript实现可拖动可提交的弹出层对话框效果
本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...
- JavaScript实现元素拖动性能优化
前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...
- JavaScript学习笔记-商品管理新增/删除/修改功能
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
随机推荐
- '用Roslynpad做一个轻量级的C#编辑器'
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:'用Roslynpad做一个轻量级的C#编辑器'.
- MySQL常用查询语句集合《转》
一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...
- VHD更新命令(打补丁)
DISM 查看vhd文件信息:dism /get-imageinfo /imagefile:e:\vhd\win2008r2.vhdxdism /get-imageinfo /imagefile:e: ...
- 怎么去掉li标签前面的点??
<ul class="list"> <li> </li> <li> </li> </ul> .list li ...
- Codeforces Gym 100002 E "Evacuation Plan" 费用流
"Evacuation Plan" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/10 ...
- MySQL · 物理备份 · Percona XtraBackup 备份原理
http://mysql.taobao.org/monthly/2016/03/07/ 前言 Percona XtraBackup(简称PXB)是 Percona 公司开发的一个用于 MySQL 数据 ...
- maven插件开发(二)
因为很多jar都是在开发环境中,没有到仓库中,因此偷个懒,用命令直接自动安装到仓库去.在开发的过程中遇到一个比较诡异的问题,插件用命令调mvn 安装jar到仓库总是抛如下异常: maven Canno ...
- mysql重连,连接丢失:The last packet successfully received from the server--转载
原文地址:http://nkcoder.github.io/blog/20140712/mysql-reconnect-packet-lost/ 1.1 错误信息: Caused by: com.my ...
- 下了个C-Free,结果点新建,出来的就是.cpp 怎么变成.c呢。。。他默认新建文件是c++的啊,
C-Free主界面--->工具--->环境选择--->一般--->“新建文件类型”将cpp改成c即可
- PHP.7-HTML+CSS(一)-HTML语法、常用字符实体、颜色代码
HTML+CSS HTML是WEB页面的描述性语言,浏览器解释的语言 CSS则是为HTML制定样式的机制,为浏览器解释的语言.它不能独立使用,没有HTML就没有CSS,定义网页的外观和布局(字体.背景 ...