jQuery实现拖拽页面元素并将其保存到cookie的方法


Posted in Javascript onJune 12, 2016

本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法。分享给大家供大家参考,具体如下:

实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中

好了,开始

1.准备工作

a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张)

2.页面

上代码

<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.代码如下

$("#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就变成可拖拽的了

$( "#img_move").draggable();

3.拖拽后的保存

如果,你刷新页面会发现,刚拖拽的图片,会恢复到初始位置.这个肯定不行,于是,保存就成了必须.实际开发一定要保存到数据库,因为,客户要是清空了cookie效果全部没有了...坑爹的360常干这事

这里除了cookie还要用到json插件,这样保存的时候会方便并且把拖拽后元素的信息储备到同一个对象中,便于读取

上代码

$( "#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保存的信息读出来,并赋到对应元素上

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.总结:

①.思路是先拖后保存.实现方式各有不同

②.实际开发一定要保存到数据库

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Angular的事件和表单详解
Dec 26 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 #Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 #Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 #Javascript
JQuery的attr 与 val区别
Jun 12 #Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 #Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 #Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP类的封装与继承详解
2015/09/29 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
完善的jquery处理机制
2016/02/21 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
JsChart组件使用详解
2018/03/04 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
javascript实现日历效果
2019/06/17 Javascript
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
详解python深浅拷贝区别
2019/06/24 Python
Python测试线程应用程序过程解析
2019/12/31 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
人力资源部门的主要职能
2014/02/22 职场文书
初三班主任寄语大全
2014/04/04 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
工程部岗位职责
2015/02/10 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
python 远程执行命令的详细代码
2022/02/15 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS