div 上移下移技术

最新推荐文章于 2023-09-03 08:26:41 发布

原创最新推荐文章于 2023-09-03 08:26:41 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #class #c #null #javascript

css样式控制专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的元素拖拽效果，并能够将元素的位置信息保存在本地Cookie中，以便用户下次访问时可以恢复到之前的位置。此外，还提供了一个应用实例，展示了如何在实际网页中应用这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者地址：http://www.52hai.com/2005/article.asp?id=1861

要移到中间，就有上移与下移

<META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE> .a7container {FLOAT: left; WIDTH: 385px; POSITION: relative} .a2 {FLOAT: left; WIDTH: 385px; POSITION: relative;} #rc4 {BACKGROUND: #b3d580; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px} #rc6 {BACKGROUND: #99c9b1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px} #rc8 {BACKGROUND: #b4a1d8; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px} #rc5 {BACKGROUND: #f7c480; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px} #rc7 {BACKGROUND: #d5d588; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px} #rc9 {BACKGROUND: #eea2bb; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px} </STYLE> <BODY> <DIV><SPAN id=sd_up style="VISIBILITY: hidden">上移</SPAN><SPAN id=sd_down style="VISIBILITY: hidden">下移</SPAN></DIV> <DIV class=a2 style="MARGIN-RIGHT: 0px! important"> <DIV id=rc4> <DIV id=bt4></DIV> </DIV> <DIV id=rc6> <DIV id=bt6></DIV> </DIV> <DIV id=rc8> <DIV id=bt8></DIV> </DIV> </DIV> <SCRIPT></SCRIPT> </BODY>

关于应用范例
<?xml version="1.0" encoding="gb2312"?> <!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=gb2312" /> <title>Test page</title> <meta name="Author" content="mozart0" /> <style type="text/css"> /*<![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none } .txt{ padding:4px; background-color:#ffffff } /*]]>*/ </style> <script language="javascript" type="text/javascript"> //<![CDATA window.onload=function(){ ggGroup(document.getElementById('test'),5); }; function ggGroup(ele,margin){ margin=margin||0; var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); var txtUp='上移↑ ',txtDown='下移↓'; var panels=children(ele); for(var i=0,h=0;i<panels.length;i++){ var p=panels[i]; p.style.position='absolute'; p.style.width='100%'; var b=document.createElement('div'); with(b.style){ fontSize='12px'; padding='4px'; backgroundColor=bgcolors[i%bgcolors.length]; textAlign='right'; } b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>'; b.firstChild.onclick=moveup; b.firstChild.style.cursor='pointer'; b.lastChild.onclick=movedown; b.lastChild.style.cursor='pointer'; p.insertBefore(b,p.firstChild); p.style.top=h+'px'; p.index=i; h+=p.offsetHeight+margin; } ele.style.height=h+'px'; ele.style.position='relative'; check(0,i-1); function check(){ for(var i=0;i<arguments.length;i++){ var x=arguments[i]; var c=panels[x].firstChild.childNodes; c[0].style.visibility=x==0?'hidden':'visible'; c[1].style.visibility=x==panels.length-1?'hidden':'visible'; panels[x].index=x; } } function moveup(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index-1]); } function movedown(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index+1]); } function swap(p1,p2){ var N=10; var INTV=200; var arr1,arr2; var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; arr1=makeArr(t1,t1<t2?h2:-h2); arr2=makeArr(t2,t1<t2?-h1:h1); for(var i=0;i<N;i++)(function(){ var j=i; setTimeout(function(){ p1.style.top=arr1[j]+"px"; p2.style.top=arr2[j]+"px"; if(j==N-1){ panels[p1.index]=p2; panels[p2.index]=p1; check(p1.index,p2.index); } },(j+1)*INTV/N); })(); function makeArr(f,x){ var ret=[]; for(var i=0;i<N;i++) ret[i]=Math.round(f+i*x/(N-1)); return ret; } } function children(e){ var ret=[]; for(var i=0,c=e.childNodes;i<c.length;i++) if(c[i].nodeType==1) ret.push(c[i]); return ret; } } //]]> </script> </head> <body> <ul id="test"> <li> <div class="txt"><h2>Hello<br />baby</h2></div></li> <li> <div class="txt"> <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div></li> <li> <div class="txt"> <i>人之初，性本善</i> </div></li> <li> <div class="txt"> may be you are right<br />may be<br />...<br />but i don't understand </div></li> </ul> </body> </html>

带位置保存到本地cookise
<?xml version="1.0" encoding="gb2312"?> <!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=gb2312" /> <title>Test page</title> <meta name="Author" content="mozart0" /> <style type="text/css"> /*<![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none } .txt{ padding:4px; background-color:#ffffff } .title{ font:bold 14px/20px verdana; position:absolute; top:0px; } /*]]>*/ </style> <script language="javascript" type="text/javascript"> //<![CDATA window.onload=function(){ var g=ggGroup(document.getElementById('test'),5,true); //var a=g.serialize(); //g.setup(a.reverse()); }; function ggGroup(ele,margin,useCookie){ ////////// //by mozart0, 2007.06.09 ////////// margin=margin||0; var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); var txtUp='上移↑ ',txtDown='下移↓ '; var panels=children(ele); for(var i=0;i<panels.length;i++){ var p=panels[i]; p.style.position='absolute'; p.style.width='100%'; var b=document.createElement('div'); with(b.style){ fontSize='12px'; lineHeight='20px'; backgroundColor=bgcolors[i%bgcolors.length]; textAlign='right'; } b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>'; b.firstChild.onclick=moveup; b.firstChild.style.cursor='pointer'; b.lastChild.onclick=movedown; b.lastChild.style.cursor='pointer'; p.insertBefore(b,p.firstChild); } var retObj={ save:function(){ setCookie('gg_'+ele.id, retObj.serialize().join(','),7*24); }, load:function(){ var a=getCookie('gg_'+ele.id); retObj.setup(a?a.split(','):null); }, serialize:function(){ for(var i=0,a=[],c=children(ele);i<c.length;i++) a.push(c[i].index); return a; }, setup:function(a){ var c=children(ele); if(a&&a.length==c.length){ panels=new Array(c.length); for(var i=0;i<a.length;i++) panels[a[i]]=c[i]; } for(var i=0,h=0,c=[];i<panels.length;i++){ panels[i].style.top=h+'px'; h+=panels[i].offsetHeight+margin; c.push(i); } check.apply(null,c); ele.style.height=h+'px'; ele.style.position='relative'; } }; if(useCookie){ retObj.load(); window.attachEvent? window.attachEvent('onunload',retObj.save): window.addEventListener('unload',retObj.save,false); } else retObj.setup(null); return retObj; function setCookie(name,value,expires){ var x=name+"="+escape(value); if(expires){ var d=new Date(); d.setTime(d.getTime()+expires*24*3600*1000); x+="; Expires="+d.toGMTString(); } document.cookie=x; } function getCookie(name){ var a=document.cookie.split("; "); name+="="; for(var i=0;i<a.length;i++) if(a[i].indexOf(name)==0) return unescape(a[i].substr(name.length)); return ""; } function check(){ for(var i=0;i<arguments.length;i++){ var x=arguments[i]; var c=panels[x].firstChild.childNodes; c[0].style.display=x==0?'none':''; c[1].style.display=x==panels.length-1?'none':''; panels[x].index=x; } } function moveup(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index-1]); } function movedown(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index+1]); } function swap(p1,p2){ var N=10; var INTV=200; var arr1,arr2; var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; arr1=makeArr(t1,t1<t2?h2:-h2); arr2=makeArr(t2,t1<t2?-h1:h1); for(var i=0;i<N;i++)(function(){ var j=i; setTimeout(function(){ p1.style.top=arr1[j]+"px"; p2.style.top=arr2[j]+"px"; if(j==N-1){ panels[p1.index]=p2; panels[p2.index]=p1; check(p1.index,p2.index); } },(j+1)*INTV/N); })(); function makeArr(f,x){ var ret=[]; for(var i=0;i<N;i++) ret[i]=Math.round(f+i*x/(N-1)); return ret; } } function children(e){ var ret=[]; for(var i=0,c=e.childNodes;i<c.length;i++) if(c[i].nodeType==1) ret.push(c[i]); return ret; } } //]]> </script> </head> <body> <ul id="test"> <li> <div class="txt"> <div class="title">Title A</div> <h2>Hello<br />baby</h2></div></li> <li> <div class="txt"> <div class="title">Title B</div> <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div></li> <li> <div class="txt"> <div class="title">Title C</div> <i>人之初，性本善</i> </div></li> <li> <div class="txt"> <div class="title">Title D</div> may be you are right<br />may be<br />...<br />but i don't understand </div></li> </ul> </body> </html>

只要移到中间，就有上移与下移

<META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE> .a7container {FLOAT: left; WIDTH: 385px; POSITION: relative} .a2 {FLOAT: left; WIDTH: 385px; POSITION: relative;} #rc4 {BACKGROUND: #b3d580; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px} #rc6 {BACKGROUND: #99c9b1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px} #rc8 {BACKGROUND: #b4a1d8; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px} #rc5 {BACKGROUND: #f7c480; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px} #rc7 {BACKGROUND: #d5d588; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 100px} #rc9 {BACKGROUND: #eea2bb; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 200px} </STYLE> <BODY> <DIV><SPAN id=sd_up style="VISIBILITY: hidden">上移</SPAN><SPAN id=sd_down style="VISIBILITY: hidden">下移</SPAN></DIV> <DIV class=a2 style="MARGIN-RIGHT: 0px! important"> <DIV id=rc4> <DIV id=bt4></DIV> </DIV> <DIV id=rc6> <DIV id=bt6></DIV> </DIV> <DIV id=rc8> <DIV id=bt8></DIV> </DIV> </DIV> <SCRIPT></SCRIPT> </BODY>

关于应用范例
<?xml version="1.0" encoding="gb2312"?> <!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=gb2312" /> <title>Test page</title> <meta name="Author" content="mozart0" /> <style type="text/css"> /*<![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none } .txt{ padding:4px; background-color:#ffffff } /*]]>*/ </style> <script language="javascript" type="text/javascript"> //<![CDATA window.onload=function(){ ggGroup(document.getElementById('test'),5); }; function ggGroup(ele,margin){ margin=margin||0; var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); var txtUp='上移↑ ',txtDown='下移↓'; var panels=children(ele); for(var i=0,h=0;i<panels.length;i++){ var p=panels[i]; p.style.position='absolute'; p.style.width='100%'; var b=document.createElement('div'); with(b.style){ fontSize='12px'; padding='4px'; backgroundColor=bgcolors[i%bgcolors.length]; textAlign='right'; } b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>'; b.firstChild.onclick=moveup; b.firstChild.style.cursor='pointer'; b.lastChild.onclick=movedown; b.lastChild.style.cursor='pointer'; p.insertBefore(b,p.firstChild); p.style.top=h+'px'; p.index=i; h+=p.offsetHeight+margin; } ele.style.height=h+'px'; ele.style.position='relative'; check(0,i-1); function check(){ for(var i=0;i<arguments.length;i++){ var x=arguments[i]; var c=panels[x].firstChild.childNodes; c[0].style.visibility=x==0?'hidden':'visible'; c[1].style.visibility=x==panels.length-1?'hidden':'visible'; panels[x].index=x; } } function moveup(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index-1]); } function movedown(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index+1]); } function swap(p1,p2){ var N=10; var INTV=200; var arr1,arr2; var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; arr1=makeArr(t1,t1<t2?h2:-h2); arr2=makeArr(t2,t1<t2?-h1:h1); for(var i=0;i<N;i++)(function(){ var j=i; setTimeout(function(){ p1.style.top=arr1[j]+"px"; p2.style.top=arr2[j]+"px"; if(j==N-1){ panels[p1.index]=p2; panels[p2.index]=p1; check(p1.index,p2.index); } },(j+1)*INTV/N); })(); function makeArr(f,x){ var ret=[]; for(var i=0;i<N;i++) ret[i]=Math.round(f+i*x/(N-1)); return ret; } } function children(e){ var ret=[]; for(var i=0,c=e.childNodes;i<c.length;i++) if(c[i].nodeType==1) ret.push(c[i]); return ret; } } //]]> </script> </head> <body> <ul id="test"> <li> <div class="txt"><h2>Hello<br />baby</h2></div></li> <li> <div class="txt"> <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div></li> <li> <div class="txt"> <i>人之初，性本善</i> </div></li> <li> <div class="txt"> may be you are right<br />may be<br />...<br />but i don't understand </div></li> </ul> </body> </html>

带位置保存到本地cookise
<?xml version="1.0" encoding="gb2312"?> <!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=gb2312" /> <title>Test page</title> <meta name="Author" content="mozart0" /> <style type="text/css"> /*<![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none } .txt{ padding:4px; background-color:#ffffff } .title{ font:bold 14px/20px verdana; position:absolute; top:0px; } /*]]>*/ </style> <script language="javascript" type="text/javascript"> //<![CDATA window.onload=function(){ var g=ggGroup(document.getElementById('test'),5,true); //var a=g.serialize(); //g.setup(a.reverse()); }; function ggGroup(ele,margin,useCookie){ ////////// //by mozart0, 2007.06.09 ////////// margin=margin||0; var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); var txtUp='上移↑ ',txtDown='下移↓ '; var panels=children(ele); for(var i=0;i<panels.length;i++){ var p=panels[i]; p.style.position='absolute'; p.style.width='100%'; var b=document.createElement('div'); with(b.style){ fontSize='12px'; lineHeight='20px'; backgroundColor=bgcolors[i%bgcolors.length]; textAlign='right'; } b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>'; b.firstChild.onclick=moveup; b.firstChild.style.cursor='pointer'; b.lastChild.onclick=movedown; b.lastChild.style.cursor='pointer'; p.insertBefore(b,p.firstChild); } var retObj={ save:function(){ setCookie('gg_'+ele.id, retObj.serialize().join(','),7*24); }, load:function(){ var a=getCookie('gg_'+ele.id); retObj.setup(a?a.split(','):null); }, serialize:function(){ for(var i=0,a=[],c=children(ele);i<c.length;i++) a.push(c[i].index); return a; }, setup:function(a){ var c=children(ele); if(a&&a.length==c.length){ panels=new Array(c.length); for(var i=0;i<a.length;i++) panels[a[i]]=c[i]; } for(var i=0,h=0,c=[];i<panels.length;i++){ panels[i].style.top=h+'px'; h+=panels[i].offsetHeight+margin; c.push(i); } check.apply(null,c); ele.style.height=h+'px'; ele.style.position='relative'; } }; if(useCookie){ retObj.load(); window.attachEvent? window.attachEvent('onunload',retObj.save): window.addEventListener('unload',retObj.save,false); } else retObj.setup(null); return retObj; function setCookie(name,value,expires){ var x=name+"="+escape(value); if(expires){ var d=new Date(); d.setTime(d.getTime()+expires*24*3600*1000); x+="; Expires="+d.toGMTString(); } document.cookie=x; } function getCookie(name){ var a=document.cookie.split("; "); name+="="; for(var i=0;i<a.length;i++) if(a[i].indexOf(name)==0) return unescape(a[i].substr(name.length)); return ""; } function check(){ for(var i=0;i<arguments.length;i++){ var x=arguments[i]; var c=panels[x].firstChild.childNodes; c[0].style.display=x==0?'none':''; c[1].style.display=x==panels.length-1?'none':''; panels[x].index=x; } } function moveup(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index-1]); } function movedown(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index+1]); } function swap(p1,p2){ var N=10; var INTV=200; var arr1,arr2; var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; arr1=makeArr(t1,t1<t2?h2:-h2); arr2=makeArr(t2,t1<t2?-h1:h1); for(var i=0;i<N;i++)(function(){ var j=i; setTimeout(function(){ p1.style.top=arr1[j]+"px"; p2.style.top=arr2[j]+"px"; if(j==N-1){ panels[p1.index]=p2; panels[p2.index]=p1; check(p1.index,p2.index); } },(j+1)*INTV/N); })(); function makeArr(f,x){ var ret=[]; for(var i=0;i<N;i++) ret[i]=Math.round(f+i*x/(N-1)); return ret; } } function children(e){ var ret=[]; for(var i=0,c=e.childNodes;i<c.length;i++) if(c[i].nodeType==1) ret.push(c[i]); return ret; } } //]]> </script> </head> <body> <ul id="test"> <li> <div class="txt"> <div class="title">Title A</div> <h2>Hello<br />baby</h2></div></li> <li> <div class="txt"> <div class="title">Title B</div> <img src="http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg" /> </div></li> <li> <div class="txt"> <div class="title">Title C</div> <i>人之初，性本善</i> </div></li> <li> <div class="txt"> <div class="title">Title D</div> may be you are right<br />may be<br />...<br />but i don't understand </div></li> </ul> </body> </html>