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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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往XML中添加节点的方法
2015/03/12 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
功能强大的php分页函数
2016/07/20 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript Split()方法
2015/12/18 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
python文件写入实例分析
2015/04/08 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
党员培训思想汇报
2014/01/07 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
企业文化口号
2014/06/12 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人租房协议书
2014/11/28 职场文书
大连导游词
2015/02/12 职场文书
2014年个人总结范文
2015/03/09 职场文书
2015年双拥工作总结
2015/04/08 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL