最近在给一家公司做网站，现在都是可视化 *** 作界面，方便没有基础的用户对网站进行更新。贴一下原始的方法。比如先用HTML写一个div层，然后在层的“按下”事件里加入一个Js函数，这个函数是让div的位置随鼠标的移动而动，放开鼠标后再“放开”事件里用一个函数判断div当前的位置（离top和left的距离），然后保存在变量里，在用户点保存按钮后把位置数据保存到数据库，然后在前台调用位置数据。
个人认为，一个网站的好与不好，一是看它的前端设计，布局；二是看其后台的易 *** 作程度。当然这一切都建立在稳定兼容的前提下。
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>框架自定义拖拽</Title><style>body {margin:0px;padding:0px;Font-size:12px;text-align:center;}body > div {text-align:center;margin-right:auto;margin-left:auto;}.content {wIDth:900px;}.content .left {float:left;wIDth:20%;border:1px solID #FF0000;margin:3px;}.content .center {float:left;border:1px solID #FF0000;margin:3px;wIDth:57%}.content .right {float:right;wIDth:20%;border:1px solID #FF0000;margin:3px}.mo {height:auto;border:1px solID #CCC;margin:3px;background:#FFF}.mo h1 {background:#ECF9FF;height:18px;padding:3px;cursor:move}.mo .nr {height:80px;border:1px solID #F3F3F3;margin:2px}h1 {margin:0px;padding:0px;text-align:left;Font-size:12px}</style><script>var dragobj={}window.onerror=function(){return false}function on_ini(){String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}var agent=navigator.userAgentwindow.isOpr=agent.inc("Opera")window.isIE=agent.inc("IE")&&!isOprwindow.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIEif(isMoz){Event.prototype.__defineGetter__("x",function(){return this.clIEntX+2})Event.prototype.__defineGetter__("y",function(){return this.clIEntY+2})}basic_ini()}function basic_ini(){window.$=function(obj){return typeof(obj)=="string"?document.getElementByID(obj):obj}window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}}window.onload=function(){on_ini()var o=document.getElementsByTagname("h1")for(var i=0;i<o.length;i++){o[i].onmousedown=function(e){if(dragobj.o!=null)return falsee=e||eventdragobj.o=this.parentNodedragobj.xy=getxy(dragobj.o)dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))dragobj.o.style.wIDth=dragobj.xy[2]+"px"dragobj.o.style.height=dragobj.xy[3]+"px"dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"dragobj.o.style.position="absolute"var om=document.createElement("div")dragobj.otemp=omom.style.wIDth=dragobj.xy[2]+"px"om.style.height=dragobj.xy[3]+"px"dragobj.o.parentNode.insertBefore(om,dragobj.o)return false}}}document.onselectstart=function(){return false}window.onfocus=function(){document.onmouseup()}window.onblur=function(){document.onmouseup()}document.onmouseup=function(){if(dragobj.o!=null){dragobj.o.style.wIDth="auto"dragobj.o.style.height="auto"dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)dragobj.o.style.position=""oDel(dragobj.otemp)dragobj={}}}document.onmousemove=function(e){e=e||eventif(dragobj.o!=null){dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"createtmpl(e)}}function getxy(e){var a=new Array()var t=e.offsettop;var l=e.offsetleft;var w=e.offsetWIDth;var h=e.offsetHeight;while(e=e.offsetParent){t+=e.offsettop;l+=e.offsetleft;}a[0]=t;a[1]=l;a[2]=w;a[3]=hreturn a;}function inner(o,e){var a=getxy(o)if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){if(e.y<(a[0]+a[3]/2))return 1;elsereturn 2;}elsereturn 0;}function createtmpl(e){for(var i=0;i<12;i++){if($("m"+i)==dragobj.o)continuevar b=inner($("m"+i),e)if(b==0)continuedragobj.otemp.style.wIDth=$("m"+i).offsetWIDthif(b==1){$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))}else{if($("m"+i).nextSibling==null){$("m"+i).parentNode.appendChild(dragobj.otemp)}else{$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)}}return}for(var j=0;j<4;j++){if($("dom"+j).INNERHTML.inc("div")||$("dom"+j).INNERHTML.inc("div"))continuevar op=getxy($("dom"+j))if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){$("dom"+j).appendChild(dragobj.otemp)dragobj.otemp.style.wIDth=(op[2]-10)+"px"}}}</script></head><body><div class=content><div class=left ID=dom0><div class=mo ID=m0><h1>dom0</h1><div ></div></div><div class=mo ID=m1><h1>dom1</h1><div ></div></div><div class=mo ID=m2><h1>dom2</h1><div ></div></div><div class=mo ID=m3><h1>dom3</h1><div ></div></div></div><div class=center ID=dom1><div class=mo ID=m4><h1>dom4</h1><div ></div></div><div class=mo ID=m5><h1>dom5</h1><div ></div></div><div class=mo ID=m6><h1>dom6</h1><div ></div></div><div class=mo ID=m7><h1>dom7</h1><div ></div></div></div><div class=right ID=dom2><div class=mo ID=m8><h1>dom8</h1><div ></div></div><div class=mo ID=m9><h1>dom9</h1><div ></div></div><div class=mo ID=m10><h1>dom10</h1><div ></div></div><div class=mo ID=m11><h1>dom11</h1><div ></div></div></div></div></body></HTML> 总结 以上是内存溢出为你收集整理的可视化响应式建站全部内容，希望文章能够帮你解决可视化响应式建站所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）