Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    156
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Help modifying draggable <tr> script (changing and keeping row bold)?

    With the script, when you "grab" a table row to move it changes to bold (tr.active td). How can this be modified so that the row remains bold after it's moved? Similar to the way a standard href link changes to and remains a designated color after it has been visited.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title> Draggable table rows </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
    
        * {
            font-family:arial,tahoma,verdana;
            font-size:11px;
        }
    
        table {
            border-spacing:0;
            border:1px solid silver;
            caption-side:bottom;
        }
    
        td {
            text-align:left;
            padding:3px 10px;
            border:1px solid white;
        }
    
        tr.active td {
            background:#ffffe0;
            font-weight: bold;
        }
    
        tr.target td {
            border-top:1px dashed black;
        }
    
        </style>
    
        <script type="text/javascript">
        // <![CDATA[
    
        window.onload = function() {
            var current = null;
            var dragTarget = null;
            var dragState = false;
    
            function toggleCurrent(row) {
                if(current) current.className = current.className.replace(/\bactive\b/g, ' ');
                (current = row).className += ' active';
            }
    
            function toggleTarget(row) {
                if(dragTarget) dragTarget.className = dragTarget.className.replace(/\btarget\b/g, ' ');
                dragTarget = row;
                if(row) row.className += ' target';
            }
    
            function cancelEvent(e) {
                try {
                    e.preventDefault();
                    e.stopPropagation();
                } catch (exception) {
                    e.returnValue = false;
                }    return false;
            }
    
            function getRow(e) {
                var target = e.target;
                while(target && !/^tr$/i.test(target.nodeName)) {
                    target = target.parentNode;
                }
                if(!target || !target.className || target.className.indexOf('draggable') == -1)
                    return;
                return target;
            }
    
            if(!document.addEventListener) { // IIIEEEE!!!
                document.addEventListener = function(type, handler) {
                    document.attachEvent('on'+type, function(e) {
                        e.target = e.srcElement;
                        return handler(e);
                    });
                }
            }
    
            document.addEventListener('mousedown', function(e){
                var target = getRow(e);
                if(target) {
                    toggleCurrent(target);
                    dragState = true;
                    return cancelEvent(e);
                }
            }, false);
    
            document.addEventListener('mousemove', function(e){
                if(!dragState) return;
                toggleTarget(getRow(e));
                return cancelEvent(e);
            }, false);
    
            document.addEventListener('mouseup', function(e) {
                if(dragState && current && dragTarget)
                    dragTarget.parentNode.insertBefore(current, dragTarget);
                dragState = false;
                toggleTarget(false);
            }, false);
        }
    
        // ]]>
        </script>
    
    </head>
    
    <body>
    
        <table>
            <caption>drag table rows</caption>
            <tbody>
                <tr class="draggable">
                    <td>lorem</td>
                    <td>1</td>
                    <td>a</td>
                </tr>
                <tr class="draggable">
                    <td>ipsum</td>
                    <td>2</td>
                    <td>b</td>
                </tr>
                <tr class="draggable">
                    <td>dolor</td>
                    <td>3</td>
                    <td>c</td>
                </tr>
                <tr class="draggable">
                    <td>sit</td>
                    <td>4</td>
                    <td>d</td>
                </tr>
                <tr class="draggable">
                    <td>amet</td>
                    <td>5</td>
                    <td>e</td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>
    Last edited by Daniellez; 01-19-2009 at 12:58 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title> Draggable table rows </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
    
        * {
            font-family:arial,tahoma,verdana;
            font-size:11px;
        }
    
        table {
            border-spacing:0;
            border:1px solid silver;
            caption-side:bottom;
        }
    
        td {
            text-align:left;
            padding:3px 10px;
            border:1px solid white;
        }
    
        tr.active td {
            background:#ffffe0;
            font-weight: bold;
        }
    
        tr.target td {
            border-top:1px dashed black;
        }
        tr.lst td {
            font-Weight:bold;
        }
    
        </style>
    
        <script type="text/javascript">
        // <![CDATA[
    
        window.onload = function() {
            var current = null;
            var dragTarget = null;
            var dragState = false;
            var lst=null;
    
            function toggleCurrent(row) {
                if(current) current.className = current.className.replace(/\bactive\b/g, ' ');
                (current = row).className += ' active';
            }
    
            function toggleTarget(row) {
                if(dragTarget){
                 dragTarget.className = dragTarget.className.replace(/\btarget\b/g, ' ');
                }
                dragTarget = row;
                if(row) row.className += ' target';
            }
    
            function cancelEvent(e) {
                try {
                    e.preventDefault();
                    e.stopPropagation();
                } catch (exception) {
                    e.returnValue = false;
                }    return false;
            }
    
            function getRow(e) {
                var target = e.target;
                while(target && !/^tr$/i.test(target.nodeName)) {
                    target = target.parentNode;
                }
                if(!target || !target.className || target.className.indexOf('draggable') == -1)
                    return;
                return target;
            }
    
            if(!document.addEventListener) { // IIIEEEE!!!
                document.addEventListener = function(type, handler) {
                    document.attachEvent('on'+type, function(e) {
                        e.target = e.srcElement;
                        return handler(e);
                    });
                }
            }
    
            document.addEventListener('mousedown', function(e){
                var target = getRow(e);
                if(target) {
                    toggleCurrent(target);
                    dragState = true;
                    return cancelEvent(e);
                }
            }, false);
    
            document.addEventListener('mousemove', function(e){
                if(!dragState) return;
                toggleTarget(getRow(e));
                return cancelEvent(e);
            }, false);
    
            document.addEventListener('mouseup', function(e) {
               if(dragState && current && dragTarget){
                   if (lst) lst.className=lst.className.replace(/\blst\b/g, ' ');
                    current.className=current.className+=' lst';
                    lst=current;
                    dragTarget.parentNode.insertBefore(current, dragTarget);
               }
               dragState = false;
                toggleTarget(false);
            }, false);
        }
    
        // ]]>
        </script>
    
    </head>
    
    <body>
    
        <table>
            <caption>drag table rows</caption>
            <tbody>
                <tr class="draggable">
                    <td>lorem</td>
                    <td>1</td>
                    <td>a</td>
                </tr>
                <tr class="draggable">
                    <td>ipsum</td>
                    <td>2</td>
                    <td>b</td>
                </tr>
                <tr class="draggable">
                    <td>dolor</td>
                    <td>3</td>
                    <td>c</td>
                </tr>
                <tr class="draggable">
                    <td>sit</td>
                    <td>4</td>
                    <td>d</td>
                </tr>
                <tr class="draggable">
                    <td>amet</td>
                    <td>5</td>
                    <td>e</td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Daniellez (01-19-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    156
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hi and thank you! I should have clarified this in my post. Is it possible for every row that's moved to remain bold? Your code keeps only the last row bold.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title> Draggable table rows </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
    
        * {
            font-family:arial,tahoma,verdana;
            font-size:11px;
        }
    
        table {
            border-spacing:0;
            border:1px solid silver;
            caption-side:bottom;
        }
    
        td {
            text-align:left;
            padding:3px 10px;
            border:1px solid white;
        }
    
        tr.active td {
            background:#ffffe0;
            font-weight: bold;
        }
    
        tr.target td {
            border-top:1px dashed black;
        }
        tr.lst td {
            font-Weight:bold;
        }
    
        </style>
    
        <script type="text/javascript">
        // <![CDATA[
    
        window.onload = function() {
            var current = null;
            var dragTarget = null;
            var dragState = false;
    
            function toggleCurrent(row) {
                if(current) current.className = current.className.replace(/\bactive\b/g, ' ');
                (current = row).className += ' active';
            }
    
            function toggleTarget(row) {
                if(dragTarget){
                 dragTarget.className = dragTarget.className.replace(/\btarget\b/g, ' ');
                }
                dragTarget = row;
                if(row) row.className += ' target';
            }
    
            function cancelEvent(e) {
                try {
                    e.preventDefault();
                    e.stopPropagation();
                } catch (exception) {
                    e.returnValue = false;
                }    return false;
            }
    
            function getRow(e) {
                var target = e.target;
                while(target && !/^tr$/i.test(target.nodeName)) {
                    target = target.parentNode;
                }
                if(!target || !target.className || target.className.indexOf('draggable') == -1)
                    return;
                return target;
            }
    
            if(!document.addEventListener) { // IIIEEEE!!!
                document.addEventListener = function(type, handler) {
                    document.attachEvent('on'+type, function(e) {
                        e.target = e.srcElement;
                        return handler(e);
                    });
                }
            }
    
            document.addEventListener('mousedown', function(e){
                var target = getRow(e);
                if(target) {
                    toggleCurrent(target);
                    dragState = true;
                    return cancelEvent(e);
                }
            }, false);
    
            document.addEventListener('mousemove', function(e){
                if(!dragState) return;
                toggleTarget(getRow(e));
                return cancelEvent(e);
            }, false);
    
            document.addEventListener('mouseup', function(e) {
               if(dragState && current && dragTarget){
                   if (!/\blst\b/.test(current.className)) current.className+=' lst';
                    dragTarget.parentNode.insertBefore(current, dragTarget);
               }
               dragState = false;
                toggleTarget(false);
            }, false);
        }
    
        // ]]>
        </script>
    
    </head>
    
    <body>
    
        <table>
            <caption>drag table rows</caption>
            <tbody>
                <tr class="draggable">
                    <td>lorem</td>
                    <td>1</td>
                    <td>a</td>
                </tr>
                <tr class="draggable">
                    <td>ipsum</td>
                    <td>2</td>
                    <td>b</td>
                </tr>
                <tr class="draggable">
                    <td>dolor</td>
                    <td>3</td>
                    <td>c</td>
                </tr>
                <tr class="draggable">
                    <td>sit</td>
                    <td>4</td>
                    <td>d</td>
                </tr>
                <tr class="draggable">
                    <td>amet</td>
                    <td>5</td>
                    <td>e</td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Daniellez (01-19-2009)

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    156
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Wow! You're good you! Thank you immensely!

    Blessings,
    D


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •