×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Drag and Drop

How to move table rows around using drag and drop by BillyRayPreachersSon
Posted: 8 Jun 04 (Edited 27 Jun 07)

This code will enable you to move table rows around using drag-and-drop functionality. It only works in IE.

The image in the left-hand cell should be used to initiate the dragging operation. The drop position is highlighted as you drag the row around.

CODE

<html>
<head>
    <style type="text/css">
        tr, tr td {
            border: 1px #999999 solid;
            border-bottom: 2px #999999 solid;
            background-color: #FFFFFF;
        }

        tr.underline, tr.underline td {
            border-bottom: 2px #000000 solid;
            background-color: #CCCCCC;
        }
    </style>
    <script type="text/javascript">
    <!--
        var draggingRow = false;
        var sourceRow = null;

        function startedDragging() {
            draggingRow = true;
            sourceRow = event.srcElement.parentNode.parentNode;
        }

        function dragEnter() {
            if (draggingRow) window.event.returnValue = false;
        }

        function dragOver() {
            if (draggingRow) {
                var targetRow = event.srcElement;
                while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
                targetRow.className = 'underline';
                window.event.returnValue = false;
            }
        }

        function dragLeave() {
            if (draggingRow) {
                var targetRow = event.srcElement;
                while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
                targetRow.className = '';
            }
        }

        function dropped() {
            if (draggingRow) {
                targetRow = event.srcElement;
                while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
                targetRow.className = '';
                sourceRow.swapNode(targetRow);
                draggingRow = false;
            }
        }

        var iconForDragging = '#define icon_width 4\n#define icon_height 4\nstatic char icon_bits[] = { 0x05, 0x0A, 0x05, 0x0A };';
    //-->
    </script>
</head>
<body ondrop="dropped();">
    <table id="dragDropTable" border="0" cellpadding="2" cellspacing="0">
        <thead></thead>
        <tbody>
            <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();">
                <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
                <td>Row 0, Cell 1</td>
                <td>Row 0, Cell 2</td>
                <td>Row 0, Cell 3</td>
            </tr>
            <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
                <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
                <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
</html>

Enjoy! ;o)

Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch
http://www.codecouch.com/dan/

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close