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!

*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.

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

Resources

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