用鼠标直接动态改变各个项目的顺序

{$MY_网站顶部} {$MY_频道栏目导航} {$MY_网站通栏广告} {$MY_频道导航}

用鼠标直接动态改变各个项目的顺序

用鼠标直接动态改变各个项目的顺序
副标题：
作者：佚名文章来源：网页教学网点击数：更新时间：2008-1-3 22:39:32


今天在重写后台管理中的排序操作方式的时候，写了一段运行在客户端的更改设定listBox控件中各个项(Item)的上下顺序的脚本程序，现整理一下儿希望对初学javascript的朋友们有所帮助，当然也请各位js老鸟们不要笑话。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>排序</title> <script> var x=null; var listObj=null; //鼠标按下不放时的操作 function setTimeStart(type) { listObj=document.getElementById('forder'); //超过0.3秒启动连续的向上(下)的操作 if(type=="up") { x=setTimeout(upListItem,300); }else { x=setTimeout(downListItem,300); } } //将选中item向上 function upListItem() { var selIndex=listObj.selectedIndex; if(selIndex<0) { if(x!=null){clearTimeout(x);} return; } if(selIndex==0) { if(x!=null){clearTimeout(x);} return; } var selValue=listObj.options[selIndex].value; var selText=listObj.options[selIndex].text; listObj.options[selIndex].value=listObj.options[selIndex-1].value; listObj.options[selIndex].text=listObj.options[selIndex-1].text; listObj.options[selIndex-1].value=selValue; listObj.options[selIndex-1].text=selText; listObj.selectedIndex=selIndex-1; if(selIndex+1>0) { x=setTimeout(upListItem,200) } } //将选中item向下 function downListItem() { var selIndex=listObj.selectedIndex; if(selIndex<0) { if(x!=null){clearTimeout(x);} return; } if(selIndex==listObj.options.length-1) { if(x!=null){clearTimeout(x);} return; } var selValue=listObj.options[selIndex].value; var selText=listObj.options[selIndex].text; listObj.options[selIndex].value=listObj.options[selIndex+1].value; listObj.options[selIndex].text=listObj.options[selIndex+1].text; listObj.options[selIndex+1].value=selValue; listObj.options[selIndex+1].text=selText; listObj.selectedIndex=selIndex+1; if(selIndex+1<listObj.options.length-1) { x=setTimeout(downListItem,200) } } </script> </head> <body topMargin="20px" leftMargin="10px" rightMargin="0"> <TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <TR> <TD vAlign="top"> <TABLE id="Table4" cellSpacing="0" cellPadding="0" width="100%" border="0"> <TR> <TD><INPUT class="upBtn" type="button" value="向上↑" onmousedown="setTimeStart('up');" onmouseup="clearTimeout(x);" onclick="listObj=document.getElementById('forder');upListItem();clearTimeout(x);" ID="Button1" NAME="Button1"> <INPUT style="WIDTH: 48px; HEIGHT: 22px" type="button" value="↓向下" class="downBtn" onmousedown="setTimeStart('down');" onmouseup="clearTimeout(x);" onclick="listObj=document.getElementById('forder');downListItem();clearTimeout(x);" ID="Button2" NAME="Button2"> </TD> </TR> <TR> <TD> <SELECT id="forder" style="WIDTH: 304px; HEIGHT: 240px" size="15"> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION value=9>9</OPTION> </SELECT></TD> </TR> </TABLE> </TD> </TR> </TABLE> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
文章录入：布冰责任编辑：布冰

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。本站地址：Http://Www.Gzwm.Net
	上一篇文章：网页特效代码：模拟19位的银行账号下一篇文章：没有了
【字体：小大】发表评论加入收藏告诉好友打印此文关闭窗口

	完美解决使用酷狗2008搜
	常用电脑密码破解技巧
	CSS教程全解
	[组图]动易程序修改技巧
	[组图]Photoshop创意打
	[组图]photoshop教程：
	[组图]photoshop调色教
	[组图]让你操作Windows

	有效提高网站排名的七条
	Photoshop教程:冷色调M
	Dreamweaver制作网页13
	自己动手修改QQ等级
	QQ空间播放多首背景音乐
	QQ空间免费领养5级植物
	QQ鼠年新年贺词发给好
	能上QQ却打不开网页的原

网页特效代码：模
网页中弹出小窗口
网页中弹出小窗口
关于限制网页表单
用链接控制页面小

文章频道内容页加“

QQ聊天窗口也玩多标

超级flash幻灯片

给系统来次体检尝鲜

（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

{$MY_2006网页通用底部}