javascript实现的拖动表格行排序

本文介绍了一种通过拖动表格中的行来进行排序的方法。利用JavaScript实现了行的拖拽功能,并在鼠标抬起时调整行的位置以完成排序。示例中包含了一个具体的表格结构及交互代码。

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

 

<html>
<head>
    
<title>拖动行测试</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);
           }
        
</script>
        
</head>        
        
<body>
<table  id="filelistTab" cellspacing="0" cellpadding="2" border=1>
<tr>
    
<td class="gridtitle" style="WIDTH: 40px">列一</td>
    
<td class="gridtitle" style="WIDTH: 100px">列二</td>
    
<td class="gridtitle" style="WIDTH: 110px">列三</td>
</tr>

<tr id="1" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="1" /></td>
    
<td class="gridtitle">
        11111111111111111111
    
</td>
    
<td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="11111111111111111111" /></td>
</tr>

<tr id="2" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="2" /></td>
    
<td class="gridtitle">
        222222222222222222222
    
</td>
    
<td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="22222222222222222222222" /></td>
</tr>

<tr id="3" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="3" /></td>
    
<td class="gridtitle">
        3333333333333333333333
    
</td>
    
<td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="333333333333333" /></td>
</tr>

<tr id="4" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="4" /></td>
    
<td class="gridtitle">
        444444444444444444444
    
</td>
    
<td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="4444444444444444444444444444" /></td>
</tr>

<tr id="5" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="5" /></td>
    
<td class="gridtitle">
        55555555555555555555555
    
</td>
    
<td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="555555555555555555555" /></td>
</tr>

<tr id="6" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
    
<td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="6" /></td>
    
<td class="gridtitle">
        6666666666666666666666666
    
</td>
    
<td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="666666666666666666666" /></td>
</tr>

</table>
</body>
</html>

 

 

运行效果:
列一列二列三
11111111111111111111
222222222222222222222
3333333333333333333333
444444444444444444444
55555555555555555555555
6666666666666666666666666
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值