简单拖拽布局 cookie

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

参考的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{ 960px; margin:0 auto; overflow:hidden;zoom:1;} #warp #left{ 180px; padding:10px;float:left;} #warp #center{ 380px; padding:10px;float:left;} #warp #right{ 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> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <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>

相关阅读:
webpack 配置缓存
Python-----多线程threading用法
LINUX 编程定位工具gstack,pstack
数据库session立即生效（64---8192） SCOPE参数
shell中wait命令详解
Go语言学习笔记
使用go语言数据库
Oracle数据库管理----性能优化
数据库索引实例
Linux串口设置及编程（转）

原文地址：https://www.cnblogs.com/wtcsy/p/draglayout.html