jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中.
好了,开始.
1.准备工作.
a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张).
2.页面.
上代码
1
2
3
4
5
6
7
|
< div class = "img_list" id = "img_list" > < div id = "baidu" >< img src = "img/baidu.jpg" id = "www.baidu.com" ></ div > < div id = "google" >< img src = "img/google.png" id = "www.google.com" ></ div > < div id = "csdn" >< img src = "img/csdn.jpg" id = "www.csdn.net" ></ div > < div id = "fly" >< img src = "img/fly.jpg" id = "www.jfbcb.com" ></ div > < div id = "163" >< img src = "img/163.jpg" id = "www.163.com" ></ div > </ div > |
接下,先为每个img的父元素增加draggable,并且动态改变id,这样便于记录时减少工作量.当然,先得给它来2个事件,mouseenter,mouseleave.代码如下.
1
2
3
4
5
6
7
8
9
10
11
|
$( "#img_list div" ).on({ mouseenter: function (){ $( this ).addClass( 'img_move' ); _t_id =$( this ).attr( 'id' ); //保存原来id $( 'div.img_move' ).attr( 'id' , 'img_move' ); }, mouseleave: function (){ $( '#img_move' ).removeClass( 'img_move' ).attr( 'id' ,_t_id); _t_id = '' ; //清空,临时保存id } }); |
到目前为止,我们已实现动态加载id,下面重点来了,让div可拖拽.
只要在mouseenter事件中加上这句就行,这样当鼠标进入某块div时,div就变成可拖拽的了.
1
|
$( "#img_move" ).draggable(); |
3.拖拽后的保存.
如果,你刷新页面会发现,刚拖拽的图片,会恢复到初始位置.这个肯定不行,于是,保存就成了必须.实际开发一定要保存到数据库,因为,客户要是清空了cookie效果全部没有了...坑爹的360常干这事.
这里除了cookie还要用到json插件,这样保存的时候会方便并且把拖拽后元素的信息储备到同一个对象中,便于读取.
上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$( "#img_move" ).draggable({ start: function (e,ui){ ui.helper.css( 'z-index' , '999' ); //拖动时元素一直是不被遮蔽 }, stop: function (e,ui){ ui.helper.css( 'z-index' , '0' ); //拖动结束,让元素可遮蔽 var x = ui.position.left ; var y = ui.position.top; var id = _t_id; var temp = { 'id' :id, 'x' :x, 'y' :y}; var _data = $.toJSON(temp); //转成json $.cookie( 'img_list_' +_t_id,_data,{expires:1}); //保存信息,设置有效时间 } }); |
ps:元素在页面中的位置,简单的说是left,top的值决定的.
4.刷新后载入.
window.onload后把cookie保存的信息读出来,并赋到对应元素上.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
window.onload = function (){ fix_img( 'baidu' ); fix_img( 'google' ); fix_img( 'csdn' ); fix_img( 'fly' ); fix_img( '163' ); }; //fix_img function fix_img(id){ if (id){ var _test_data = $.cookie( 'img_list_' +id); var _id = $.evalJSON(_test_data).id; var _x = $.evalJSON(_test_data).x; var _y = $.evalJSON(_test_data).y; $( '#' +_id).css( 'left' ,_x+ 'px' ).css( 'top' ,_y+ 'px' ); } } |
5.总结.
1.思路是先拖后保存.实现方式各有不同.
2.实际开发一定要保存到数据库.
3.参考了以下大大的文章.
http://www.zhangxinxu.com/wordpress/
ps:还一些,我记不得,如果是你,让我知道,加你的文章出处.
jquery 实现页面拖拽并保存到cookie的更多相关文章
- jQuery切换网页皮肤保存到Cookie实例
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...
- jQuery切换网页皮肤并保存到Cookie示例代码
经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 监听页面中的某个div的滚动事件,并将其滚动距离保存到cookie
在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...
- 个人学习记录1:二维数组保存到cookie后再读取
二维数组保存到cookie后再读取 var heartsArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],[0,0, ...
- 将用户信息保存到Cookie中
/** * 把用户保存到Cookie * * @param request * @param response * @param member */ private void rememberPwdA ...
- jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
随机推荐
- DOM 之 document 查找元素方法
DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...
- window.frameElement属性
比如有一个iframe的src是xxx.htm frameElement的作用就是在xxx.htm中获得这个引用它的iframe objet 这样你就可以在xxx.htm改变iframe的大小,或是边 ...
- IS脚本学习
OnFirstUIBefore:函数块用于第一安装应用时安装部件前所要完成的任务.一般在这里进行下列设: 1. 设置屏蔽 2. 显示欢迎信息,软件协议书或关于软件安装的其他说明信息 3. 从用户处获取 ...
- Shell之test
test命令用法.功能:检查文件和比较值 1)判断表达式 if test (表达式为真) if test !表达式为假 test 表达式1 –a 表达式2 两个表达式 ...
- C# 数据结构 线性表(顺序表 链表 IList 数组)
线性表 线性表是最简单.最基本.最常用的数据结构.数据元素 1 对 1的关系,这种关系是位置关系. 特点 (1)第一个元素和最后一个元素前后是没有数据元素,线性表中剩下的元素是近邻的,前后都有元素. ...
- 4537: [Hnoi2016]最小公倍数
Description 给定一张N个顶点M条边的无向图(顶点编号为1,2,…,n),每条边上带有权值.所有权值都可以分解成2^a*3^b的形式.现在有q个询问,每次询问给定四个参数u.v.a和b,请你 ...
- iOS应用如何支持IPV6-b
果然是苹果打个哈欠,iOS行业内就得起一次风暴呀.自从5月初Apple明文规定所有开发者在6月1号以后提交新版本需要支持IPV6-Only的网络,大家便开始热火朝天的研究如何支持IPV6,以及应用中哪 ...
- golang中设置Host Header的小Tips
前言 笔者最近时间一直在学习和写Ruby和Go,尤其是Go,作为云计算时代的标准语言,写起来还是相当有感觉的,难过其会越来越火. 不过写的过程中,也遇到了一些小问题,本文就是分享关于go语言设置 HT ...
- BZOI 1507 [NOI2003] Editor
Background After trying to solve problem EDIT1(Editor) and being ****ed by Brainf**k, Blue Mary deci ...
- ios7控件特性(一)
苹果发布iOS7之后,iOS7全部采用扁平化的界面,我们的app界面在iOS7上出现了很大的改变,这包括UINavigationBar,UIButton,UIActionSheet,UITabBar等 ...