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 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    156
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Draggable Table Rows script..limiting it to certain <tr>'s

    Hi,

    How can this be limited to certain tables/table rows?

    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,th {
            text-align:left;
            padding:3px 10px;
            border:1px solid white;
        }
    
        tr.active td, tr.active th {
            background:#ffffe0;
        }
    
        tr.target td, tr.target th {
            border-top:1px dashed black;
        }
    
        </style>
    
        <script type="text/javascript">
        // <![CDATA[
    
        // quick 'n dirty,
        // oo(h) brother where art thou!
    
        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;
                }    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>
                    <th>lorem</th>
                    <td>1</td>
                    <td>a</td>
                </tr>
                <tr>
                    <th>ipsum</th>
                    <td>2</td>
                    <td>b</td>
                </tr>
                <tr>
                    <th>dolor</th>
                    <td>3</td>
                    <td>c</td>
                </tr>
                <tr>
                    <th>sit</th>
                    <td>4</td>
                    <td>d</td>
                </tr>
                <tr>
                    <th>amet</th>
                    <td>5</td>
                    <td>e</td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>

    -------------------


    ****Resolved****

    Adding the following if statement to the getRow function worked:

    Code:
    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;
    		}
    Last edited by Daniellez; 01-16-2009 at 01:53 PM.


 

Posting Permissions

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