当前位置:  编程技术>jquery

jquery页面拖拽并保存到cookie实例分享

    来源: 互联网  发布时间:2014-10-04

    本文导语:  要实现效果: 页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见。 1.准备工作. a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张). 2.页面.   代码示例:   接下,先为每个img的父元素增加d...

要实现效果:
页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见。

1.准备工作.
a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张).
2.页面.
 

代码示例:







 

接下,先为每个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效果全部没有了。
这里除了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.总结.
1.思路是先拖后保存.实现方式各有不同.
2.实际开发一定要保存到数据库.


    
 
 

您可能感兴趣的文章:

  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • jQuery 表单自动保存插件 Autosave
  • jQuery的cookie插件实现保存用户登陆信息
  • jQuery切换网页皮肤并保存到Cookie示例代码
  • jquery实现checkbox的全选、取消及跨页保存
  • jquery实现保存已选用户
  • jquery实现点击文字可编辑并修改保存至数据库
  • jquery对table中各数据的增加、保存、删除操作示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • 解决用jquery load加载页面到div时,不执行页面js的问题
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery页面加载完毕再执行代码多种方法
  • jQuery 页面加载 fakeLoader.js
  • jQuery 页面动画效果 Animsition
  • jQuery向导页面插件 jWizard
  • jquery 页面滚动到指定DIV的代码
  • jQuery 页面滚动插件 ScrollMe
  • jQuery页面元素缩放插件 Zoonooz.js
  • Jquery跳到页面指定位置的方法
  • jQuery页面滚动插件 toanywhere
  • jQuery 页面滚动插件 Scrolld.js
  • jQuery aminate方法定位到页面具体位置
  • 自适应页面背景插件 jQuery.resBg
  • jquery防止重复执行动画避免页面混乱
  • jQuery 页面切换插件 browserSwipe.js
  • jQuery 页面滚动插件 One Page Scroll
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3