简单拖拽布局 cookie

现在的位置: 首页 > 综合 > 正文

RSS

简单拖拽布局 cookie

2013年01月13日 ⁄ 综合 ⁄ 共 12417字 ⁄ 字号小中大 ⁄ 评论关闭

公司要用一个正好练练手！

参考的google的拖拽布局,

用的鼠标的x=e.clientx 和 y=e.clienty,判断是否在其它块里面

offest = pos(div) div为需要检测碰撞的块
x>offset.left&&x<offset.right&&y>offset.top&&y<offset.bottom

有一个占位div 一个代理div

占位div就是放到的位置

代理div就是拖拽时候的代理层

在写的时候遇到了一些问题和要注意的地方

1.在ie6,7下如果没有设置高度和宽度直接设置透明度是不会透明的可以在样式写*zoom:1 触发它的layout
2.拖拽的时候可能会选中文字图片什么的在退拽的过程中可以不断的清空选中 window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty();
3.初始化的时候我会清除掉里面的dom块如果用innerHTML ="" 发现ie6下加上dom块样式加载不了.... 所以用的removeChild 而且多遍历了一次
4. 当占位div(虚线的div)加到页面上的时候计算碰撞的位置是占位div 和别选中的那个div合起来的面积

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽布局</title> <style type="text/css"> html{overflow-y:scroll;} html,body{ overflow-x:hidden; } *{ margin:0px; padding:0px;} body{ font-size:12px;} #warp{ width:960px; margin:0 auto; overflow:hidden;zoom:1;} #warp #left{ width:180px; padding:10px;float:left;} #warp #center{ width:380px; padding:10px;float:left;} #warp #right{ width:340px; padding:10px;float:left;} #warp .c{ border:1px solid #DCDCDC; margin:10px 0; zoom:1} #warp .c.h{ border:1px solid #03C;} #warp .c.b{ border:1px dashed #999;} #warp .c .hd{ padding:0px 10px; line-height:30px; background-color:#EFF7FF;border-bottom:1px solid #DCDCDC; cursor:move;} #warp .c .hd h2{ font-weight:bold; font-size:13px; color:#666;} #warp .c .bd{ padding:10px;} </style> </head> <body > <div id="warp" style="display:none"> <div p="p" id="left"> <div id="a1" class="c"> <div class="hd"> <h2>标题1</h2> </div> <div class="bd"> <div style=" height:120px;">模块1</div> </div> </div> <div id="a2" class="c"> <div class="hd"> <h2>标题2</h2> </div> <div class="bd"> <div style=" height:100px;">模块2</div> </div> </div> <div id="a3" class="c"> <div class="hd"> <h2>标题3</h2> </div> <div class="bd"> <div style=" height:60px;">模块3</div> </div> </div> </div> <div p="p" id="center"> <div id="a4" class="c"> <div class="hd"> <h2>标题4</h2> </div> <div class="bd"> <div style=" height:160px;">模块4</div> </div> </div> <div id="a5" class="c"> <div class="hd"> <h2>标题5</h2> </div> <div class="bd"> <div style=" height:80px;">模块5</div> </div> </div> <div id="a6" class="c"> <div class="hd"> <h2>标题6</h2> </div> <div class="bd"> <div style=" height:120px;">模块6</div> </div> </div> </div> <div p="p" id="right"> <div id="a7" class="c"> <div class="hd"> <h2>标题7</h2> </div> <div class="bd"> <div style=" height:30px;">模块7</div> </div> </div> <div id="a8" class="c"> <div class="hd"> <h2>标题8</h2> </div> <div class="bd"> <div style=" height:130px;">模块8</div> </div> </div> <div id="a9" class="c"> <div class="hd"> <h2>标题9</h2> </div> <div class="bd"> <div style=" height:80px;">模块9</div> </div> </div> </div> </div> <script type="text/javascript"> function getCookie(name){ if (document.cookie.length>0){ start=document.cookie.indexOf(name + "=") if (start!=-1){ start=start + name.length+1 c_end=document.cookie.indexOf(";",start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(start,c_end)) } } return "" } (function(doc,undefined){ var win = this; win.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(win.navigator.userAgent.toLowerCase()); win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true); win.$$ = function(id){ return typeof id === 'string' ? doc.getElementById(id) : id; }; win.$q = function(name,parent){ return parent.getElementsByTagName(name); } win.$c = function(name,parent){ var elem = typeof name ==='object'? name : doc.createElement(name); parent&&parent.appendChild(elem); return elem; }; win.addListener = function(element,e,fn){ !element.events&&(element.events = {}); element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn}); element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; win.addListener.guid = 1; win.removeListener = function(element,e,fn){ var handlers = element.events[e],type; if(fn){ for(type in handlers) if(handlers[type]===fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); delete handlers[type]; } }else{ for(type in handlers){ element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]); delete handlers[type]; } } }; win.fireEvent = function(element,eventName){ if(element[eventName]){ element[eventName](); }else if(element.fireEvent){ element.fireEvent('on'+eventName); }else if(doc.createEvent){ var evt = doc.createEvent("MouseEvents"); evt.initEvent(eventName, true, true); element.dispatchEvent(evt); } }; win.setStyle = function(elems, style, value){ if( !elems.length ) elems = [elems]; if( typeof style == "string"){ style = value === undefined?{cssText:style}:(function(o){ return (o[style] = value,o); })({}); }; each(elems,function(i,elem,style){ var value,name,ie=Sys.ie ; for(name in style){ value = style[name]; if (name === "opacity" && ie) { elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha$[^)]*$/, "" ) + "alpha(opacity=" + value * 100 + ")"; }else if(name === "float"){ elem.style[ ie ? "styleFloat" : "cssFloat" ] = value; }else{ name = name.replace(/-([a-z])/ig, function(all, letter){ return letter.toUpperCase(); }); elem.style[name] = value; } } },style); }; win.setAttr = function(dom,attr){ if(typeof attr !== 'object') return; for(var name in attr) dom.setAttribute(name,attr[name]); } var slice = Array.prototype.slice; win.bind = function(object, fun) { var args = slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; win.bindAsEventListener = function(object, fun,args) { var args = slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || win.event].concat(args)); } }; win.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i<length;i++){ if ( (options = arguments[ i ]) != null ) for(var name in options){ var src = target[ name ], copy = options[ name ]; if ( target === copy ) continue; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) target[ name ] = copy; } } return target; }; win.each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; win.currentStyle = function(element){ return element.currentStyle || doc.defaultView.getComputedStyle(element, null); }; win.pos = function(elem){ var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument : doc; if ( !elem.getBoundingClientRect || win.Sys.ie8 ) { var n = elem; while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; } else { var rect = elem.getBoundingClientRect(); left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; left += rect.left; right += rect.right; top += rect.top; bottom += rect.bottom; } return { "left": left, "top": top, "right": right, "bottom": bottom ,"width":elem.offsetWidth,"height":elem.offsetHeight}; }; win.hasClass = function(element, className){ return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }; win.addClass = function(element, className){ if(!win.hasClass(element, className)) element.className.replace(/\s/g,'')==='' ? element.className = className : element.className+= " "+className; }; win.removeClass = function(element, className){ win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s*|^)'+className+'(\\s*|$)'),' ')); } })(document); var dragLayout = { init : function(options){ extend(this,options); var items = this.items = [], self = this; this.data = {}; this.hashItems ={} each(this.groups,function(i,group){ var arr = self.data[i] = []; group.setAttribute("pid",i); each($q("div",group),function(i,div){ if(div.className === "c"){ self.hashItems[div.id] = div; items.push(div); arr.push(div.id); addListener(div,"mousedown",bindAsEventListener(self,self.start,div)); } }); //group.innerHTML ="" ie6这样清除dom 在加上dom居然 dom居然没有样式 }); each(this.hashItems,function(i,div){ div.parentNode.removeChild(div); }); this.proxyDiv = $c("div",document.body); setStyle(this.proxyDiv,{ display : "none", backgroundColor:"#F0FBEB", position : "absolute", opacity : 0.8 }); this.temporaryDiv = $c("div"); this.temporaryDiv.className = "c b"; var xx = getCookie("xx") //xx=0-a1_a2_a3,1-a8_a5,2-a7_a9_a4_a6 //生成data结构 if(xx){ this.data = {} each(xx.split(","),function(i,d){ d = d.split("-"); var lists = d[1].split("_"); if(lists[0]===""){ lists=[]; } self.data[d[0]] = lists; }); }else{ this.setCookie(); } //重新生成页面 each(this.data,function(i,o){ var group = self.groups[i], data = self.data[i]; data.length!==0 &&each(data,function(i,id){ group.appendChild(self.hashItems[id]); }); }) this.container.style.display=""; }, start : function(e,div){ var elem = e.target || e.srcElement; if( elem.nodeName==="H2" || elem.className==="c" ){ this.div = div; setStyle(div,{ opacity: 0.5 }); var offset = pos(this.div); this.x = e.clientX - offset.left; this.y = e.clientY - offset.top; Sys.ie ? this.proxyDiv.setCapture() : e.preventDefault(); addListener(document,"mousemove",bindAsEventListener(this,this.move,div)); addListener(document,"mouseup",bind(this,this.up)); } }, move : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var proxyDiv = this.proxyDiv, self = this, x = e.clientX, y = e.clientY; if(proxyDiv.style.display === "none"){ var offset = pos(this.div); setStyle(proxyDiv,{ width : offset.width+"px", height : offset.height+"px", display: "block" }); } setStyle(proxyDiv,{ left : x - this.x + "px", top : y - this.y +(Math.max(document.documentElement.scrollTop,document.body.scrollTop)) + "px" }); var l = this.items.length,j=0; each(this.items,function(i,div){ j++; if(self.div === div) return; var offset = pos(div) if(div === self.targetDiv){ offset.top = pos(self.temporaryDiv).top; } if(x>offset.left&&x<offset.right&&y>offset.top&&y<offset.bottom){ self.targetDiv = div; setStyle(self.temporaryDiv,{ height : self.div.offsetHeight + "px" }); div.parentNode.insertBefore(self.temporaryDiv,div); j=0; return false; } }); if(l===j&&this.temporaryDiv.parentNode&&this.temporaryDiv.parentNode.nodeName=== "DIV"){ this.temporaryDiv.parentNode.removeChild(this.temporaryDiv); this.targetDiv = null; } if(!(this.temporaryDiv.parentNode&&this.temporaryDiv.parentNode.nodeName=== "DIV")){ each(this.groups,function(i,div){ var offset = pos(div); if($q("div",div).length===0){ var top = offset.top; var bottom = offset.top+240; }else{ var top = offset.bottom; var bottom = offset.bottom+150; } if(x>offset.left&&x<offset.right&&y>top&&y<bottom){ self.targetDiv = div; setStyle(self.temporaryDiv,{ height : self.div.offsetHeight + "px" }); div.appendChild(self.temporaryDiv) } }); } }, up : function(e){ removeListener(document,'mousemove'); removeListener(document,'mouseup'); Sys.ie&&this.proxyDiv.releaseCapture(); this.proxyDiv.style.display = "none" setStyle(this.div,"opacity",1); if(this.targetDiv){ var group = this.div.parentNode, index = group.getAttribute("pid"), self = this, j, toGroup; this.targetDiv.getAttribute("pid") ? toGroup = this.targetDiv : toGroup = this.targetDiv.parentNode; var toIndex = toGroup.getAttribute("pid") each(this.data[index],function(i,id){ if(id===self.div.id){ j=i; return false; } }); var k; each(this.data[toIndex],function(i,id){ if(id===self.targetDiv.id){ k=i; return false; } }); var list = this.data[index].splice(j,1)[0]; this.targetDiv.getAttribute("pid") ? this.data[toIndex].push(list) : this.data[toIndex].splice(k,0,list); this.setCookie(); } if(this.temporaryDiv.parentNode&&this.temporaryDiv.parentNode.nodeName=== "DIV"){ this.div.parentNode.removeChild(this.div); this.temporaryDiv.parentNode.replaceChild(this.div,this.temporaryDiv) } this.div = null; this.targetDiv = null; }, setCookie : function(){ var str = ""; for(var list in this.data){ str+=list+"-"+this.data[list].join("_")+","; } document.cookie = "xx="+str.replace(/,$/,""); } } window.onload = function(){ dragLayout.init({ container : $$("warp"), groups : {"0":$$("left"),"1":$$("center"),"2":$$("right")} }); } </script> </body> </html>

【上篇】Android 中的数据存取方式之一: Preference(配置)
【下篇】分享：TreeFrog 1.3 发布，基于 C++/QT 的 Web 框架

作者: catamaran

该日志由 catamaran 于11年前发表在综合分类下，最后更新于 2013年01月13日.
转载请注明: 简单拖拽布局 cookie | 学步园 +复制链接

抱歉!评论已关闭.

学步园

简单拖拽布局 cookie

作者: catamaran

书签

最新文章New

本站推荐

返回首页