Js打造層拖動實例：網站菜單拖拽移位效果

2024-09-05 12:20:31

字體：大中小

來源：轉載

供稿：網友

一個基于JavaScript的層手動實例，讓網站的菜單可以拖拽移位，記得土豆網的“豆單”有這種功能。本效果還尚未徹底完成，部分地方因沒有寫入對應內容，因此JS可能會提示有錯誤。

<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 div,.wapper .m-li-cur div{ 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 div{background:#FDFFDA;line-height:30px; height:30px;border:1px #ccc solid; padding:0 0 0 16px;color:#316DA9; font-size:14px;}</style></head><body><div   id="iwvjtn8m0"   class="wapper" id="box"><div   id="iwvjtn8m0"   class="m-wapper"><div   id="iwvjtn8m0"   class="m-li"><div   id="iwvjtn8m0"   class="m-sub">ASP源碼</div></div><div   id="iwvjtn8m0"   class="m-li"><div   id="iwvjtn8m0"   class="m-sub">PHP源碼</div></div><div   id="iwvjtn8m0"   class="m-li"><div   id="iwvjtn8m0"   class="m-sub">JSP源碼</div></div><div   id="iwvjtn8m0"   class="m-li"><div   id="iwvjtn8m0"   class="m-sub">JAVA源碼</div></div></div><ol id="m-num"></ol><div   class="iwvjtn8m0"   id="tips"></div></div><script type="text/javascript">document.getElementsByClassName=function(eleClassName){	var getEleClass = [];	var myclass = new RegExp("http://b"+eleClassName+"http://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 divs = document.getElementsByClassName("m-sub");	var tips = document.getElementById("tips");		for(var i=0;i<divs.length;i++){		var mnumNode=document.createElement("li");		mNum.appendChild(mnumNode);		mNum.getElementsByTagName("li")[i].innerHTML=i+1;		divs[i].onmouseover=function(e){			show(this);		}	}	function show(obj){		for(var i=0;i<divs.length;i++){			if(divs[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<divs.length;j++){ /*恢復行默認樣式*/						divs[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<divs.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("div");							var delNode=tips.getElementsByTagName("div")[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+CSS雙層嵌套的滑動門導航塊

下一篇：超漂亮自適應的導航菜單，純CSS寫的