`

简易而又灵活的Javascript拖拽框架

阅读更多
  一、开篇
   在写了前几篇拖拽过后,有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了JavaScript对Cookie的操作还有一点JSON知识过后,修改了上一篇文章的代码,可以将结果保存在客户端Cookie,每次打开页面就可以载入上次拖拽的数据,得到上次的拖拽布局。
  
   查看示例
  
  二、原理
  
   首先添加了两个方法:setCookie和getCookie,分别用来添加/修改Cookie和读取Cookie,这些教程太多了,就不多说了。
  
   然后来说说打开网页到关闭网页的整个过程:
  
  1、打开网页的时候,会通过getCookie去读取名为“XDrag”的Cookie,如果用户是第一次打开这个页面(或者是禁用、手动删除了Cookie,总之客户端没有对应的Cookie的时候),则会有一个默认的配置;
  
  2、网页的HTML元素的结构也有所变化,以前是直接把拖拽的模块直接放置在对应的页对应的列,现在是统一放在tempContainer这个div中,通过读取的配置来将tempContianer里面的模块“分发”到配置指定的页制定的列;
  
  3、注册window.onbeforeunload事件,在页面unload之前保存配置到Cookie。保存的方法就是遍历每一页的每一列的每一个模块,将每个模块的id记录下来,根据页面和列和id来构造一个JSON字符串(因为Cookie保存的值就是字符串),这样读取的时候只需要用eval即可得到保存的数据的对象,这是JSON的优点。
  
  下面是这个JSON字符串的结构,嵌套了3层array
  
   
  jsonObj.pages得到pages数组
  
  jsonObj.pages[0]得到page1的列的数组
  
  jsonObj.pages[0][0]得到page1的第一列的所有id的集合
  
  三、代码
  
   下面是几个添加的几个主要的方法:
  
  function setCookie(sName,sValue,oExpires,sPath,sDomain,bSecure){
   var sCookie = sName + "=" + encodeURIComponent(sValue);
   if(oExpires)
   sCookie += "; expires=" + oExpires.toGMTString();
   if(sPath)
   sCookie += "; path=" + sPath;
   if(sDomain)
   sCookie += "; domain=" + sDomain;
   if(bSecure)
   sCookie += "; secure";
  
   document.cookie = sCookie;
  }
  
  function getCookie(sName){
   var sRE = "(?:; )?" + sName + "=([^;]*);?";
   var oRE = new RegExp(sRE);
   if(oRE.test(document.cookie))
   return decodeURIComponent(RegExp["$1"]);
   else
   return null;
  }
  
  
  XDrag.save = function(){//将结果保存到cookie
   var jsonString = new StringBuilder();
   jsonString.append('{"pages":[')
   for(var i=0;i<XDrag.pages.length;i++){//遍历每一页
   jsonString.append("[");
   var page = XDrag.pages[i];
   for(var j=0;j<page.childNodes.length;j++){//遍历每一列
   var column = page.childNodes[j];
   if(column.nodeName.toLowerCase() != "div")
   continue;
   jsonString.append("[");
   for(var k=0;k<column.childNodes.length;k++){//遍历每一列的module
   var module = column.childNodes[k];
   if(module.nodeName.toLowerCase() != "div" || module.style.display == "none")
   continue;
   jsonString.append('"' + module.id + '",');
   }
   jsonString.append("],");
   }
   jsonString.append("],");
   }
   jsonString.append(']}');
   var jsonStr = jsonString.toString();
   var cookieValue = jsonStr.replace(/,]/g,"]");
   setCookie("XDrag",cookieValue,null,null,null,false);
  }
  
  
  XDrag.readFromCookie = function(){//读取cookie
   var value = getCookie("XDrag") || XDrag.defaultLayout;
   var obj = eval('(' + value + ')');
   return obj;
  }
  
  
  四、示例下载
  
   点此下载示例 http://files.cnblogs.com/LongWay/Drag5.rar
   
分享到:
评论

相关推荐

    简易而又灵活的Javascript拖拽框架(一)

    js拖拽的时候,发现了一个强大而又灵活的拖拽框架,(之前用了代码混淆器,还好代码比较短,我就翻译过来了)利用这个框架不仅能实现简单的拖动,更能轻易的实现各种复杂的拖放功能。这一篇先实现最简单的拖拽,稍微...

    Javascript拖放框架

    在本压缩包文件中,我们可能找到了一个简易而灵活的JavaScript拖放框架的源代码或者相关文档,这将有助于我们理解并快速实现拖放功能。 拖放功能的核心在于以下几点关键技术: 1. **数据Transfer对象**:在拖放...

    简易鼠标任意拖拽层源码

    "简易鼠标任意拖拽层源码"提供了五个JavaScript实现的拖拽框架实例,旨在帮助开发者轻松创建可自由拖动的层,从而提升用户的交互体验。以下是对这些实例中的关键知识点的详细解释: 1. **Drag框架基础**:Drag框架...

    简易个人友尚音乐框架.rar

    在这个简易音乐框架中,JavaScript可能用于控制音乐的播放、暂停、前进、后退、音量调整等功能。作者可能使用了某个音乐播放插件,通过调用其API来实现这些功能。同时,JavaScript还可能用来更新界面状态,比如显示...

    模拟乐谱简易做题JS(移动端手指拖拽答题)

    在本项目中,"模拟乐谱简易做题JS(移动端手指拖拽答题)"是一个使用JavaScript技术构建的互动式乐谱答题应用,主要针对iPad尺寸进行优化。这个应用提供了丰富的功能,如上下题切换、答案检查以及支持移动端的手势拖拽...

    简易网页制作

    尽管如此,【简易网页制作】依然提供了与时俱进的功能,如表格、框架、超链接、表单等,满足了初学者的基本需求。对于那个年代,这样的工具无疑是新手入门的绝佳选择。 压缩包中的`fp2003.exe`文件很可能就是【简易...

    jsplumb实现的简易流程图画图工具

    总结来说,JSPlumb 提供了一套完整的框架来构建交互式的流程图画图工具,而这个基于 visual-ivr-master 改造的项目则在此基础上进行了优化和扩展,使得流程图的创建更加便捷和灵活。通过学习和使用这个工具,开发者...

    JS简易图片裁剪-多点移动

    【标题】"JS简易图片裁剪-多点移动"是一个关于使用JavaScript实现图像裁剪功能的教程,尤其强调了在裁剪过程中支持多点移动,这通常涉及到图像处理和前端开发的技术。在这个项目中,开发者可能需要理解JavaScript的...

    monitor 简易线状动态图

    标题中的“monitor 简易线状动态图”指的是创建一个简单的线性进度条或动态图表,用于在网页上展示某种过程的监控或进度。这种图表通常由HTML、CSS和JavaScript(在这里特指jQuery)技术实现,通过在网页的div元素内...

    MooTools的简易自定义滚动条小插件

    MooTools是一个基于原型的JavaScript框架,它的命名来源于"More Tools, More Options",提供了类系统、事件处理、动画效果等丰富的功能。它支持模块化开发,允许开发者按需加载所需组件,从而减少页面加载时间。 3...

    antv-流程图,一个简易的基于antv x6实现的流程图绘制

    antv流程图是一款基于antv x6框架的轻量级流程图绘制工具,适用于Web端进行灵活、可交互的流程图设计。antv是阿里巴巴开源的一系列数据可视化库,而x6则是antv中的一个核心组件,专注于提供强大的图形编辑和绘图能力...

    基于java applet的简易画图程序

    然而,随着技术的发展,特别是JavaScript和现代Web框架的崛起,Java Applet的使用逐渐减少,因为它需要用户的浏览器安装Java插件,这在安全性和兼容性方面存在一些问题。 2. Applet的生命周期: Java Applet有四个...

    Java Script网页特效实例大全

    在.NET环境中,JavaScript通常与ASP.NET配合使用,负责前端交互,而.NET框架处理后端逻辑。开发者可以利用jQuery、React、Vue或Angular等库和框架进一步提升开发效率和特效质量。 总之,"Java Script网页特效实例...

    简易的echarts+java的可视化项目

    Echarts是一款基于JavaScript的数据可视化库,而Java作为后端语言,负责处理数据并将其传递给前端。下面将详细探讨这个项目的实现原理和关键知识点。 1. **Echarts介绍** Echarts是由百度开发的一款开源的可视化库...

    Jquery仿IGoogle实现可拖动窗口示例代码

    根据给定文件信息,本文将深入探讨JQuery仿IGoogle实现可拖动窗口的技术细节,并且对JQuery、easywidgets框架和实现方法进行详细解说。 首先,要了解JQuery。JQuery是一个快速、小巧且功能丰富的JavaScript库,它让...

    go.js电路图dom

    GoJS是一个强大的JavaScript库,专为构建交互式的图形界面而设计。它提供了一套完整的API,可以创建和管理复杂图形的布局、交互和动画。在本项目中,开发人员利用GoJS的功能,构建了一个简易版的图片编辑器,旨在...

    html+css+js实现XP WINDOW界面

    在XP窗口界面中,JavaScript用于处理用户的交互,如点击按钮打开新窗口,拖动窗口改变位置,或者模拟窗口最小化、最大化和关闭的动画。这通常涉及到事件监听(如`addEventListener`)和DOM操作(如`innerHTML`, `...

    vue文件管理系统仿百度网盘

    1. **Vue.js框架**:Vue.js是一款轻量级的前端JavaScript框架,以其易用性和灵活性而受到开发者喜爱。在本项目中,Vue.js用于构建用户界面,通过声明式渲染和响应式数据绑定简化了DOM操作,提高了开发效率。 2. **...

    draggable-swimlane-editor:可拖拽的泳道图编辑器

    在IT领域,尤其是在软件开发和数据可视化中,"draggable-swimlane-editor"是一个非常有用且创新的工具,专门用于创建和编辑可拖拽的泳道图。泳道图是一种常用于流程图、工作流管理和任务分配的图表,它通过划分不同...

Global site tag (gtag.js) - Google Analytics