转载：javascript 拖拽排序，简洁示例备忘

时间：2022-12-25 23:54:40

转载自：http://blog.csdn.net/wang4978/article/details/6721157

<html>

<head>

    <title>拖动行测试</title>

    <script type="text/javascript">

        var beginMoving = false;

        function MouseDownToMove(obj) {

            obj.style.zIndex = ;

            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 = ;

            obj.style.left = ;

            obj.style.zIndex = ;

            beginMoving = false;

            var tempTop = event.clientY - obj.mouseDownY;

            var tempRowIndex = (tempTop - tempTop % ) / ;

            if (tempRowIndex + obj.rowIndex < ) tempRowIndex = -;

            else tempRowIndex = tempRowIndex + obj.rowIndex;

            if (tempRowIndex >= obj.parentElement.rows.length - ) tempRowIndex = obj.parentElement.rows.length - ;

            obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);

        }

        </script>

</head>        

<body>

<table  id="filelistTab" cellspacing="" cellpadding="" border=>

<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="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="" /></td>

</tr>

<tr id="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="" /></td>

</tr>

<tr id="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="" /></td>

</tr>

<tr id="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="" /></td>

</tr>

<tr id="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="" /></td>

</tr>

<tr id="" 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="" /></td>

    <td class="gridtitle">

    </td>

    <td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="" /></td>

</tr>

</table>

</body>

</html>

相关文章