javascript 拖动排序代码
求一拖动并且可以排序的代码?上下排序就可以的
谢谢了？
急急急！
[解决办法]
参考：
http://www.v-ec.com/dh20156/code/dhdatagrid/index.asp
[解决办法]
上边链接的blog真漂亮,想注册一个,一看...是程序员专用的..唉
还发现一个老大级人物
http://www.v-ec.com/dh20156/code/regexp.htm
啊....哈
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script language= "javascript ">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex > = obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
obj.parentNode.insertBefore(obj,obj.nextSibling);//Add this to fix a IE bug(JK2007-07-17)
}
</script>
</head>
<body >
用鼠标移动TR <br>
<TABLE WIDTH= "300 " BORDER= "1 " >
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=blue> 0 </TD> <TD> 0 </TD> <TD> 0 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=black> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD bgcolor=red> 2 </TD> <TD> 2 </TD> <TD> 2 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 3 </TD> <TD> 3 </TD> <TD> 3 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 4 </TD> <TD> 4 </TD> <TD> 4 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 5 </TD> <TD> 5 </TD> <TD> 5 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 6 </TD> <TD> 6 </TD> <TD> 6 </TD> </TR>
<TR bgcolor=#ffffff style= 'height:25;position:relative; ' onmousedown= 'MouseDownToMove(this) ' onmousemove= 'MouseMoveToMove(this) ' onmouseup= 'MouseUpToMove(this); '> <TD> 7 </TD> <TD> 7 </TD> <TD> 7 </TD> </TR>
</script>
</TABLE>
</body>
</html>
[解决办法]
拖动排序，华而不实，慎用。
另附左右移动和排序示例：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<style>
.ecv_autoSizeDropDown
{
font-family: "Arial ", "Helvetica ", "sans-serif ";
font-size: 12px;
font-style: normal;
color: #201B74;
background-color: #FFFFFF;
width:300px;
}
</style>
</head>
<body >
<div style= "font-size:10pt; ">
注1：左右移动进行选取 <br/>
注2：已解决的问题 <br/>
----能进行多行排序 <br/>
----解决排序时滚动条归零的问题 <br/>
<br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：作者JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About%20MoveRightOrLeft "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<form name=frm>
<table>
<tr >
<td>
<select name=SrcSelect size=6 class= "ecv_autoSizeDropDown " style= "height:160px; " multiple ondblclick= "moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">
<option value= "1 "> test1 </option>
<option value= "2 "> test2 </option>
<option value= "3 "> test3 </option>
<option value= "4 "> test4 </option>
<option value= "5 "> test5 </option>
<option value= "6 "> test6 </option>
<option value= "7 "> test7 </option>
<option value= "8 "> test8 </option>
<option value= "9 "> test9 abcde abcde abcde abcde abcde abcde abcde abcde </option>
</select>
</td>
<td width= "30px ">
<input align= "left " type=button value= "> > " onclick= "moveLeftOrRightAll(document.frm.SrcSelect,document.frm.ObjSelect) " > <br> <br>
<input align= "left " type=button value= "> " onclick= "moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) " > <br> <br>
<input align= "left " type=button value= " < " onclick= "moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) " > <br> <br>
<input align= "left " type=button value= " < < " onclick= "moveLeftOrRightAll(document.frm.ObjSelect,document.frm.SrcSelect) " >
</td>
<td>
<select name=ObjSelect size=6 class= "ecv_autoSizeDropDown " style= "height:160px; " multiple ondblclick= "moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">
<option value= "11 "> test11 </option>
<option value= "12 "> test12 </option>
<option value= "13 "> test13 </option>
<option value= "14 "> test14 </option>
<option value= "15 "> test15 </option>
<option value= "16 "> test16 </option>
</select>
</td>
<td width= "30px ">
<input type=button value= "AA " onclick= "moveToTop(document.frm.ObjSelect) " > <br> <br>
<input type=button value= "A " onclick= "moveUp(document.frm.ObjSelect) " > <br> <br>
<input type=button value= "V " onclick= "moveDown(document.frm.ObjSelect) " > <br> <br>
<input type=button value= "VV " onclick= "moveToBottom(document.frm.ObjSelect) " >
</td>
</tr>
</table>
</form>
</body>
<script language=javascript srccccc= "CommonJS_SwapOption.js ">
function moveLeftOrRight(fromObj,toObj)
{
var fromObjOptions=fromObj.options;
for(var i=0;i <fromObjOptions.length;i++){
if(fromObjOptions[i].selected){
toObj.appendChild(fromObjOptions[i]);
i--;
}
}
}
function moveLeftOrRightAll(fromObj,toObj)
{
var fromObjOptions=fromObj.options;
if(fromObjOptions.length> 1000) {
//if(!confirm( "Are you sure to move options? ")) return false;
}
for(var i=0;i <fromObjOptions.length;i++){
fromObjOptions[0].selected=true;
toObj.appendChild(fromObjOptions[i]);
i--;
}
}
function moveUp(selectObj)
{
var theObjOptions=selectObj.options;
for(var i=1;i <theObjOptions.length;i++) {
if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) {
swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
}
}
}
function moveDown(selectObj)
{
var theObjOptions=selectObj.options;
for(var i=theObjOptions.length-2;i> -1;i--) {
if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) {
swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
}
}
}
function moveToTop(selectObj){
var theObjOptions=selectObj.options;
var oOption=null;
for(var i=0;i <theObjOptions.length;i++) {
if( theObjOptions[i].selected && oOption) {
selectObj.insertBefore(theObjOptions[i],oOption);
}
else if(!oOption && !theObjOptions[i].selected) {
oOption=theObjOptions[i];
}
}
}
function moveToBottom(selectObj){
var theObjOptions=selectObj.options;
var oOption=null;
for(var i=theObjOptions.length-1;i> -1;i--) {
if( theObjOptions[i].selected ) {
if(oOption) {
oOption=selectObj.insertBefore(theObjOptions[i],oOption);
}
else oOption=selectObj.appendChild(theObjOptions[i]);
}
}
}
function selectAllOption(selectObj){
var theObjOptions=selectObj.options;
for(var i=0;i <theObjOptions.length;i++){
theObjOptions[0].selected=true;
}
}
/* private function */
function swapOptionProperties(option1,option2){
//option1.swapNode(option2);
var tempStr=option1.value;
option1.value=option2.value;
option2.value=tempStr;
tempStr=option1.text;
option1.text=option2.text;
option2.text=tempStr;
tempStr=option1.selected;
option1.selected=option2.selected;
option2.selected=tempStr;
}
</script>
