<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
js拖拽组件5
</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script type="text/javascript" src="Drag.js"></script>
<script type="text/javascript">
//------------------------Utility------------------------
function findPosX(obj) {//辅助函数 得到元素左边与浏览器左边的边距
var curleft = 0;
if (obj && obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj && obj.x) curleft += obj.x;
return curleft;// + document.body.scrollLeft - document.body.clientLeft;
}
function findPosY(obj) {//辅助函数 得到元素上边与浏览器上边的边距
var curtop = 0;
if (obj && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj && obj.y) curtop += obj.y;
return curtop;// + document.body.scrollTop - document.body.clientTop;
}
var StringBuilder = function(){
var self = this;
var array = [];
this.append = function(str){
array.push(str);
}
this.toString = function(){
return array.join("");
}
}
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;
}
var dragGhost = document.createElement("div");
dragGhost.style.border = "dashed 1px #CCCCCC";
dragGhost.style.background = "white";
dragGhost.style.display = "none";
dragGhost.style.margin = "10px";
var isIE = document.all;
//------------------------Start Here------------------------
var XDrag = new Object();
XDrag.tabs = [];//所有的tab集合 每个元素是tab对象 tab.elm才是html对象
XDrag.pages = [];//所有的页的集合 每个元素是html对象
XDrag.selectedTab = null;//当前选中的tab
XDrag.changeTabTimeout = 1000;
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.defaultLayout = '{"pages":[[["ab49194c-7e8a-3d69-0982-263d89e78a18","7e3cc8bc-1f3e-778a-3dc8-4ae5caae7441","d528aafe-46b2-af22-8742-1d1ac2ce8370","e7cba86c-76b1-12b7-ff4d-3700d0148630"],["5a4df923-f335-bc5f-5f4d-c2f415bb0f1c","2221085c-54d7-ec27-31f1-d8a9d9be4163","77bd4ea9-3f11-bf3f-99ec-e4752b3c7fad","baadcd83-6603-eb06-9af3-fbe05a3e59f7"],["5b769e55-63d3-e3c4-c33e-b4a6eb6b94eb","e1d3b9c1-a397-6a09-3f32-f7b641d54b4b","81dbcb9a-cc8c-b1b5-cd5c-208a33edb2ac","3d67e4d4-28cc-da98-d375-659bb17f3ca8"]],[["81f687a5-ac69-7a17-71e0-b1cef14e79e6","d5f60dea-15d9-5db3-ca97-6eda5be414ce","78aae17b-0631-dbd1-7e46-a3f6148925e2","4dbb253a-c6e2-1141-265a-8bc4b55c6b71"],["386b7cd6-2a4d-729a-84d6-1a7198ad6608","a30558b3-252f-dd9a-6f79-c85e4925c795","83901491-d362-5aa8-17d2-7662a24292da","ab45d062-c2a4-c1eb-16b2-bd805ae77799"],["e649b443-8df8-7e3b-c02e-8314bac89c70","bb7aecea-33df-cb58-1b11-801a01c9aefa","d854515e-3ced-6317-27c7-87692d8514f8","9cd35136-9d03-bd92-7d70-a7e8a21454a6"]],[["86afdf5a-33b2-8cf6-a2d3-9b78b4bf020d","c59373b6-cc26-af60-2774-361c53939e11","f27371e8-ed63-72b2-9269-61de99e841d3","2b7126a3-34ab-1496-6661-0252ac23468c"],["34b7edb9-2a86-f4ab-ba5c-594813099469","67f730da-67c8-49e4-35e9-e672e73ebca1","173ef9d5-3a2b-d0b7-25e2-1bda82816217","4846bc25-e8a3-fa39-3f1b-a47a922f56ca"],["f4bd4bbe-375c-ab61-6b58-71f74da319e8","c27ec91b-935e-47b3-56cb-757125a97664","14a5e9ca-f676-0599-2cc7-afba7b692b80","3776c44b-636f-7cb8-bc91-ea8bf8633864"]],[["099b9d02-8938-acbb-7764-04ae76a55527","d2b69d52-3aef-0ac5-bb16-7ee0d34ab843","6589d3e9-e923-bc22-8aba-684b02cb3d69","fb78f69b-37b6-9595-4335-291b6b4a1756"],["acb961ec-7072-3618-0dd8-47455db37ec7","e39ee189-3adc-bd87-d1b4-d46dc5bab73b","46e7156a-46fa-6537-f272-968f5c9139f9","b2fd9dd2-7834-ba26-79e8-dbb5de7dd23c"],["a237d5d7-cc4a-6bc4-7898-a9e12b114e2a","3de4a463-6c69-07c2-b44b-db3482a66b37","01a6e85a-adab-dd16-19fb-224416824562","45d36a37-74ba-2c1a-64f7-1e439b31ad58"]]]}';
XDrag.readFromCookie = function(){//读取cookie
var value = getCookie("XDrag") || XDrag.defaultLayout;
var obj = eval('(' + value + ')');
return obj;
}
XDrag.init = function(){
var tabs = document.getElementById("tabs");
for(var i=0;i<tabs.childNodes.length;i++){
if(tabs.childNodes[i].nodeName.toLowerCase() == "li")
XDrag.tabs.push(new tab(tabs.childNodes[i]));
}//初始化所有的tab页标签
var pages = document.getElementById("pages");
for(var i=0;i<pages.childNodes.length;i++){
if(pages.childNodes[i].nodeName.toLowerCase() == "div"){
XDrag.pages.push(pages.childNodes[i]);
}
}//找到所有的页
data = XDrag.readFromCookie();
for(var i=0;i<XDrag.tabs.length;i++){
if(XDrag.pages[i]){
var page = XDrag.pages[i];//page
XDrag.tabs[i].page = page;
page.tab = XDrag.tabs[i];//page和tab可以互相引用
var pageData = data.pages[i];
var columnIndex = 0;
for(var j=0;j<page.childNodes.length;j++){
var column = page.childNodes[j];//column
if(column.nodeName.toLowerCase() == "div"){
var columnData = pageData[columnIndex];
if(!page.columns)
page.columns = [];
page.columns.push(column);
column.page = page;
for(var k=0;k<columnData.length;k++){
var moduleElm = document.getElementById(columnData[k]);
moduleElm.column = column;
column.appendChild(moduleElm);
new module(moduleElm);
//if(column.childNodes[k].nodeName.toLowerCase() == "div"){
// var moduleElm = column.childNodes[k];//module
// moduleElm.column = column;
// new module(moduleElm);
//
// moduleIndex ++;
//}
}
columnIndex ++;
}
}
}
}//把tab页标签和页内容对应起来 初始化每个module
XDrag.tabs[0].select();//默认选中第一个页签
}
var tab = function(tabElm){
var self = this;
this.page = null;
this.elm = tabElm;
this.select = function(){
if(!this.page)
return;
if(XDrag.selectedTab){
XDrag.selectedTab.elm.className = "";
XDrag.selectedTab.page.style.display = "none";
}
this.elm.className = "tabSelected";
this.page.style.display = "block";
XDrag.selectedTab = this;
}
this.elm.onclick = function(){
//this.select(); 这个时候this指的是this.elm
self.select();
}
this.elm.onmouseover = function(){
if(XDrag.selectedTab != self)
this.className = "tabHover";
}
this.elm.onmouseout = function(){
if(XDrag.selectedTab != self)
this.className = "";
}
}
var module = function(moduleElm){
var self = this;
this.elm = moduleElm;
this.elm.module = this;
this.column = moduleElm.column;
this.page = this.column.page;
this.handle = this.elm.getElementsB
简易而又灵活的Javascript拖拽框架
需积分: 50 168 浏览量
2008-12-22
14:31:17
上传
评论
收藏 7KB RAR 举报
Javascript拖拽框架.rar （3个子文件） 
Drag5 
Drag5.htm 22KB Drag.js 3KB Style.css 1KB资源评论
tangdecheng
- 粉丝: 0
- 资源: 16
最新资源
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
- 基于C++实现的风力发电气动平衡监测系统+源代码+测量数据(高分课程设计)
- 毕业设计- 基于STM32F103C8T6 单片机，物联网技术的太阳能发电装置+源代码+文档说明+架构图+界面截图
- 基于 LSTM（长短期记忆）（即改进的循环神经网络）预测风力发电厂中风力涡轮机产生的功率+源代码+文档说明
- 基于stm32f103+空心杯电机+oled按键+运动算法
- 《CKA/CKAD应试指南/从docker到kubernetes 完全攻略》学习笔记 第1章docker基础（1.1-1.4）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
