这是一个基于javascript的层手动实例，让网站的菜单可以拖拽移位，记得土豆网的“豆单”有这种功能。本效果还尚未彻底完成，部分地方因没有写入对应内容，因此js可能会提示有错误。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/
具体代码如下：
<html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>层拖动</title><style type="text/css">*{ margin:0; padding:0}li{ list-style:none}.wapper{ width:500px; margin:50px;height:auto; overflow:hidden; position:relative; border:1px #e6e6e6 solid}.wapper ol{ position:absolute;top:0; left:0}.wapper li{width:30px; height:32px; line-height:32px; padding:3px 0; text-align:center;}.wapper .m-li{ padding:3px 3px 3px 30px;height:32px;position:relative}.wapper .m-li p,.wapper .m-li-cur p{ line-height:30px; height:30px;background:#ecf3f9; border:1px #ccc solid; padding:0 0 0 16px;color:#316da9; font-size:14px;cursor:move;}.wapper .m-li .m-sub-cur,.wapper .m-li-cur .m-sub-cur{opacity:0.35;filter:alpha(opacity=35);}.wapper .m-li-cur{ padding:0 3px 3px 30px; border-top:3px #ffdaad solid}.wapper .m-li-cur span{ padding:0 0 3px;}#tips{ position:absolute; top:0;left:0;cursor:move; z-index:2;display:none}#tips p{background:#fdffda;line-height:30px; height:30px;border:1px #ccc solid; padding:0 0 0 16px;color:#316da9; font-size:14px;}</style></head><body><p class="wapper" id="box"><p class="m-wapper"><p class="m-li"><p class="m-sub">asp源码</p></p><p class="m-li"><p class="m-sub">php源码</p></p><p class="m-li"><p class="m-sub">jsp源码</p></p><p class="m-li"><p class="m-sub">java源码</p></p></p><ol id="m-num"></ol><p id="tips"></p></p><script type="text/javascript">document.getelementsbyclassname=function(eleclassname){ var geteleclass = []; var myclass = new regexp("\\b"+eleclassname+"\\b"); var elem = this.getelementsbytagname("*"); for(var h=0;h<elem.length;h++){ var classes = elem[h].classname; if (myclass.test(classes)) geteleclass.push(elem[h]); } return geteleclass;}function $(o){ var t = document.getelementbyid(o); return t?t:false;}function hasclass(ele,cls) { return ele.classname.match(new regexp('(\\s|^)'+cls+'(\\s|$)'));}function addclass(ele,cls) { if (!this.hasclass(ele,cls)) ele.classname += " "+cls;}function removeclass(ele,cls) { if (hasclass(ele,cls)) { var reg = new regexp('(\\s|^)'+cls+'(\\s|$)'); ele.classname=ele.classname.replace(reg,' '); }}function getstyle(o,n){ return o.currentstyle?o.currentstyle[n]:(document.defaultview.getcomputedstyle(o,"").getpropertyvalue(n))}function f(){ var d=document; var mnum = document.getelementbyid("m-num"); var ols = document.getelementsbyclassname("m-wapper")[0]; var lis = document.getelementsbyclassname("m-li"); var ps = document.getelementsbyclassname("m-sub"); var tips = document.getelementbyid("tips"); for(var i=0;i<ps.length;i++){ var mnumnode=document.createelement("li"); mnum.appendchild(mnumnode); mnum.getelementsbytagname("li")[i].innerhtml=i+1; ps[i].onmouseover=function(e){ show(this); } } function show(obj){ for(var i=0;i<ps.length;i++){ if(ps[i]==obj){ var voidnum=i; obj.onmousedown=function(e){ var clonenode=obj.clonenode(true);/*克隆节点*/ tips.appendchild(clonenode); //alert(i) tips.style.width=obj.offsetwidth+"px"; tips.style.display="block"; //alert(voidnum); tips.style.top=(38*voidnum)+3+"px"; tips.style.left="30px" for(var j=0;j<ps.length;j++){ /*恢复行默认样式*/ ps[j].classname="m-sub"; } obj.classname="m-sub-cur"; /*选中行添加新样式*/ tips.onmouseover=function(e){ window.getselection ? window.getselection().removeallranges() : document.selection.empty();//清除选择 e=e||event; /*鼠标定位*/ var x=e.clienty-tips.offsettop; //var y=e.clientx-obj.offsetleft; d.onmousemove=function(e){ e=e||event; var tipstop = e.clienty-x; tips.style.top=tipstop+"px"; if(tipstop <= 3){ tips.style.top="3px"; } if(tipstop >= (38*(i-1)+3)){ tips.style.top=38*(i-1)+3+"px"; } lisnum = math.round((tipstop-3)/38); if(lisnum>=i){ lisnum=i; } for(var n=0; n<ps.length; n++){ lis[n]["classname"]="m-li"; lis[lisnum]["classname"]="m-li-cur"; } //obj.style.left=e.clientx-y+"px"; } d.onmouseup = function(){ d.onmouseup=d.onmousemove=""; tips.style.display="none"; for(var n=0; n<lis.length; n++){ lis[n]["classname"]="m-li"; } obj.classname="m-sub"; var newnode=document.createelement("p"); var delnode=tips.getelementsbytagname("p")[0];/*清空节点*/ var delnode2=lis[voidnum];/*清空节点*/ newnode.appendchild(delnode); newnode.classname="m-li"; ols.insertbefore(newnode,lis[lisnum]); ols.removechild(delnode2); tips.removechild(delnode); } } } } } }}f();</script></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！