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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现拖拽页面元素并将其保存到cookie的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2757字，纯文字阅读大概需要4分钟。

内容图文

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

内容总结

以上是互联网集市为您收集整理的jQuery实现拖拽页面元素并将其保存到cookie的方法全部内容，希望文章能够帮你解决jQuery实现拖拽页面元素并将其保存到cookie的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端