本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法。分享给大家供大家参考，具体如下：
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中
好了,开始
1.准备工作
a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张)
2.页面
上代码
接下,先为每个img的父元素增加draggable,并且动态改变id,这样便于记录时减少工作量.当然,先得给它来2个事件,mouseenter,mouseleave.代码如下
到目前为止,我们已实现动态加载id,下面重点来了,让div可拖拽
只要在mouseenter事件中加上这句就行,这样当鼠标进入某块div时,div就变成可拖拽的了
3.拖拽后的保存
如果,你刷新页面会发现,刚拖拽的图片,会恢复到初始位置.这个肯定不行,于是,保存就成了必须.实际开发一定要保存到数据库,因为,客户要是清空了cookie效果全部没有了...坑爹的360常干这事
这里除了cookie还要用到json插件,这样保存的时候会方便并且把拖拽后元素的信息储备到同一个对象中,便于读取
上代码
ps:元素在页面中的位置,简单的说是left,top的值决定的
4.刷新后载入
window.onload后把cookie保存的信息读出来,并赋到对应元素上
5.总结：
①.思路是先拖后保存.实现方式各有不同
②.实际开发一定要保存到数据库
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
1.第一步 设置响应头 header('Access-Control-Allow...$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...JS 将form表单数据快速转化为object对象（json对象） jaymou...
jQuery的区别：$().click()和$(document).on('click...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...