Dragging and dropping table rows in Javascript

Summary: This article tells you how to implement drag and drop for HTML tables in Javascript. You can download the source here and play with the demo here.

Updated: now copes with multiple tables on the same page, non-drag and non-drop rows (such as headers) and embedding form elements.

There are many articles on implementing drag and drop in Javascript and many excellent frameworks and libraries that provide you with everything you need. In fact I use Script.aculo.us quite a bit. However, I haven’t found anything much that tells you how to re-order rows in a table. Table rows are different from other elements normally used for drag and drop such as list items or divs because they can’t be moved about in the same way. It wouldn’t make sense to have absolute positioning on table rows—they sort of have to be in the table. There are also limitations on the styles you can put on rows, you can’t have a border round them for example. So, the solution to this problem is slightly different from other drag and drop mechanisms. Here’s and example, try dragging the rows about:

1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text
6	Six	some text

Drag and Drop basics

I won’t spend a great deal of time explaining the basics of drag and drop. Instead I’ll point you at How to Drag and Drop in Javascript. This article provides a good explanation including code that you can download and use.

The steps you need are:

capture the mouse move event for the whole document so you can track where the mouse is.
capture the onmouseup event for the whole document so we know when our dragged thing is dropped.
add onmousedown functions for each draggable row so that we know which row is being dragged.

In order to make this neat and reusable I have encapsulated the required data in a class (we’re also going to add functionality in here later):

function TableDnD() {
    /** Keep hold of the current drag object if any */
    this.dragObject = null;
    /** The current mouse offset */
    this.mouseOffset = null;
    /** The current table */
    this.table = null;
    /** Remember the old value of Y so that we don't do too much processing */

    this.oldY = 0;

    // rest of the code goes here...
}

The class has instance variables for the currently dragged object, the current mouse offset, the current table, and the oldY so that we can detect if we’re moving up or down. We will create one TableDnD object for each table for which we want to enable to drag and drop

Setting up the event handlers

Now we need to capture the document.onmousemove and document.onmouseup events so that we can track where the user drags and drops the row. The first version that I developed captured the events insidethe TableDnD object, but this doesn’t work if you want multiple tables on the same page. So we have to abstract this out and have global handlers for the whole page. We also therefore need to know which TableDnD object we’re currently concerned with (in other words which one, if any, initiated the drag). So, here are the event handlers event handlers we need (and a global variable to keep track):

/** Keep hold of the current table being dragged */
var currenttable = null;

/** Capture the onmousemove so that we can see if a row from the current
 *  table if any is being dragged.
 * @param ev the event (for Firefox and Safari, otherwise we use window.event for IE)
 */
document.onmousemove = function(ev){
    if (currenttable && currenttable.dragObject) {
        ev   = ev || window.event;
        var mousePos = currenttable.mouseCoords(ev);
        var y = mousePos.y - currenttable.mouseOffset.y;
        if (y != currenttable.oldY) {
            // work out if we're going up or down...
            var movingDown = y > currenttable.oldY;
            // update the old value
            currenttable.oldY = y;
            // update the style to show we're dragging

            currenttable.dragObject.style.backgroundColor = "#eee";
            // If we're over a row then move the dragged row to there so that the user sees the
            // effect dynamically
            var currentRow = currenttable.findDropTargetRow(y);
            if (currentRow) {
                if (movingDown && currenttable.dragObject != currentRow) {
                    currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
                } else if (! movingDown && currenttable.dragObject != currentRow) {
                    currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
                }
            }
        }

        return false;
    }
}

// Similarly for the mouseup
document.onmouseup = function(ev){
    if (currenttable && currenttable.dragObject) {
        var droppedRow = currenttable.dragObject;
        // If we have a dragObject, then we need to release it,

        // The row will already have been moved to the right place so we just reset stuff
        droppedRow.style.backgroundColor = 'transparent';
        currenttable.dragObject   = null;
        // And then call the onDrop method in case anyone wants to do any post processing
        currenttable.onDrop(currenttable.table, droppedRow);
        currenttable = null; // let go of the table too
    }
}

In the onmousemove method itself, we first of all check to see if we have a current table, and if so, does that have a dragObject. If not, we don’t need to do anything. If we do have a dragObject, then we need to get the event. In Internet Explorer, the event is global and accessible using window.event, in Firefox and other browsers it is passed in as a parameter, so we need to check for both cases. Once we have that, we can get the mouse coordinates (again code to follow), and check the y position. Because we’re only dragging rows, we’re only interested in the vertical direction, if the y value hasn’t changed, then we don’t need to do anything (we could also put in a threshold here so we don’t worry about small movements).

Assuming that y has changed, we can work out whether it’s an upwards or downwards direction by comparing it with the old value (you’ll see why we need this in a moment). Then we can set the background colour of the dragObject to something to make it obvious it is being dragged (we’re fairly limited as to what styles we can apply to rows—a neater approach would be to add and subtract a class, like that the style could be controlled by a stylesheet rather than code and it would be inherited by the constituent cells). Next we find out which row the mouse is currently over (again we only really need to worry about the y coordinate, we’re not really worried if the mouse strays left or right outside the table—though we could change for that if needed).

Now we know which row the mouse is over, we want to move our row to be before or after the current row depending on whether we’re moving up or down. After a quick check to make sure that we’re not moving it to where it already is, we use parentNode.insertBefore(...) to move the row. If we’re moving down, we get the nextSibling and insert before that, otherwise we just insert before the current row.

If we do move the row, then we return false from the event handler so that no other related event fires and default handling isn’t engaged.

The onmouseup method is much more straight forward. All we need to do is reset the style and then forget the dragObject and the current table.

That’s what happens when we’re actually dragging something, but how do we initiate the drag? We need to capture the mouse down event on the rows that we want to drag. Back in our TableDnD class we add an init method which takes the table as a parameter and sets everything up:

    /** Initialise the drag and drop by capturing mouse move events */

    this.init = function(table) {
        this.table = table;
        var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
        for (var i=0; i<rows.length; i++) {
            // John Tarr: added to ignore rows for which the NoDrag attribute is set
            var nodrag = rows[i].getAttribute("NoDrag")
            if (nodrag == null || nodrag == "undefined") { // There is no NoDrag attribute so make draggable
                this.makeDraggable(rows[i]);
            }
        }
    }

We get passed in the table whose rows we want to be able to drag and drop, so we remember that, then we go through all the rows in the table body and make them “draggable” (code for this coming soon). John Tarr contacted me to say that he needed to be able to control which rows were draggable and which not (for example headers shouldn’t be draggable). So he added a simple NoDrag attribute which can be used to switch off “draggability”.

Of course you might want to do something with the table once row has been dropped, so I’ve made the method call an onDrop method passing it the table and the dropped row. The default implementation does nothing, but you can redefine it to do whatever you need to (in fact in my current project I use this to make an Ajax call to let the server know the new order of the rows).

    /** This function is called when you drop a row, so redefine it in your code
        to do whatever you want, for example use Ajax to update the server */
    this.onDrop = function(table, droppedRow) {
        // Do nothing for now
    }

Getting the coordinates

Now we need some methods that get the mouse position from an event:

    /** Get the position of an element by going up the DOM tree and adding up all the offsets */
    this.getPosition = function(e){
        var left = 0;
        var top  = 0;

        while (e.offsetParent){
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
        }

        left += e.offsetLeft;
        top  += e.offsetTop;

        return {x:left, y:top};
    }

    /** Get the mouse coordinates from the event (allowing for browser differences) */
    this.mouseCoords = function(ev) {
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }

    /** Given a target element and a mouse event, get the mouse offset from that element.
        To do this we need the element's position and the mouse position */

    this.getMouseOffset = function(target, ev){
        ev = ev || window.event; // In FireFox and Safari, we get passed the event, in IE we need to get it

        var docPos    = this.getPosition(target);
        var mousePos  = this.mouseCoords(ev);
        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
    }

The first method, getPosition, takes an element and walks up the DOM using offsetParent to add up all the offsets to get the absolute position of the element. It returns the position as an object with x and y instance variables.

The next method, mouseCoords takes an event and extracts the coordinates from it. Firefox and other browsers use event.pageX and event.pageY to store the position, so we can just return this. Internet Explorer however uses event.clientX and event.clientY. What’s more is that these values are for the current window, not the position from the top of the page, so in order to be able to map these to the same values as pageX and pageY, we have to add in the current scroll position of the document.

The final method in this trio is getMouseOffset this takes a target element and an event and works out where the mouse is in relation to the element. It processes the event in the same way as we saw before to allow for browser differences and the calls the two methods above to get the positions and returns the relative position of the mouse.

Which rows?

We need two more methods to complete our class:


    /** Take an item and add an onmousedown method so that we can make it draggable */
    this.makeDraggable = function(item){
        if(!item) return;
        var self = this; // Keep the context of the TableDnd inside the function
        item.onmousedown = function(ev){
            // get the event source in a browser independent way
            var target = getEventSource(ev);
            // if it's an INPUT or a SELECT, then let the event bubble through, don't do a drag
            if (target.tagName == 'INPUT' || target.tagName == 'SELECT') return true;
            self.dragObject  = this;
            self.mouseOffset = self.getMouseOffset(this, ev);
            return false;
        }
        item.style.cursor = "move";
    }

    /** We're only worried about the y position really, because we can only move rows up and down */

    this.findDropTargetRow = function(y) {
        var rows = this.table.tBodies[0].rows;
        for (var i=0; i<rows.length; i++) {
            var row = rows[i];
            // John Tarr added to ignore rows that I've added the NoDrop attribute to (Header rows)
            var nodrop = row.getAttribute("NoDrop");
            if (nodrop == null || nodrop == "undefined") {  //There is no NoDrop attribute on rows I want to drag
                var rowY    = this.getPosition(row).y;
                var rowHeight = parseInt(row.offsetHeight)/2;
                if (row.offsetHeight == 0) {
                    rowY = this.getPosition(row.firstChild).y;
                    rowHeight = parseInt(row.firstChild.offsetHeight)/2;
                }
                // Because we always have to insert before, we need to offset the height a bit
                if ((y > rowY - rowHeight) && (y < (rowY + rowHeight))) {
                    // that's the row we're over

                    return row;
                }
            }
        }
        return null;
    }

The first, makeDraggable is called from the init function for each row in the table. It defines an onmousedown event handler to set the dragObject and the initial mouse offset (so we can track movements relative to the initial drag position). Now inside the onmousedown event handler that we are adding to each row, we want to be able to access the current TableDnD object, we can’t use this because it will be changed to the current object when the event handler is called, so instead we have a variable self which we bind to this outside the handler but which retains it’s value inside. Now the handler can refer directly to the methods and data on the TableDnD object. Inside the event handler we also need to check to see what the event source is, because if we capture and consume the onmousedown event for form elements, then the user won’t be able to click in them and type, or select. So in that case we have to just bubble it up by returning true.

As well as setting the onmousedown event handler, we also set the row’s cursor style to “move” so that the user can see it’s draggable.

The last method, findDropTargetRow works out the current row under the mouse. This is called as we move the mouse and is used to dynamically move the row so that the user can see what is happening. It simply iterates through the rows, getting the top and height of the rows and checks to see if the mouse is on it or not (in fact I displace the position by half a row to make it feel right when dragging, otherwise it’s very quick in one direction and seems “heavy” in the other direction—try different values to see what I mean!).

Again, John Tarr suggested that we should support no-drop zones too, so if the row has NoDrop set to true, then we just return null and the user can’t drop the row there

There is a browser problem however. Getting the offsetHeight for a row works fine in Internet Explorer (6 and 7) and Firefox (2.0.x), however Safari returns 0 for rows! Fortunately you can get the offsetHeight of a cell instead, so the code uses the row’s firstChild if the offsetHeight is zero. The same thing seems to happen for the rowY, so again I use the first cell.

In fact there was still a problem with Safari because the row’s offsetTop is also 0 (or sometimes a small number–presumably from the style). Thanks to Luis Chato for pointing this out and pointing me to this description of the problem. The same answer works again though. If the e.offsetHeight == 0 for the selected element in getPosition then we’ll just get the firstChild and use that instead. This works for all the browsers I’ve tested so far.

As well as the class we need one more global method to get the event source. IE and Firefox (and the others) do this in different ways. We could add this as an instance method on the TableDnD class, but because there is no TableDnD context needed, I decided to just make it a globally accessible method. Here it is:

/** get the source element from an event in a way that works for IE and Firefox and Safari
 * @param evt the source event for Firefox (but not IE--IE uses window.event) */

function getEventSource(evt) {
    if (window.event) {
        evt = window.event; // For IE
        return evt.srcElement;
    } else {
        return evt.target; // For Firefox
    }
}

Putting it all together

You can download the complete class and other methods from the resources below and then link to it from your web page. The next thing you need to do is to have a table, and then you can drag-enable the table by adding the following javascript either inline below the table HTML or in the document.onload event handler.

<script type="text/javascript">
var table = document.getElementById('table-1');
var tableDnD = new TableDnD();
tableDnD.init(table);
</script>

So all you need to do is create an instance of the TableDnD class, and then call init on it passing it the table you want to use. If you want to do something special when a row is dropped, you can add something like this:

// Redefine the onDrop so that we can display something
tableDnD.onDrop = function(table, row) {
    var rows = this.table.tBodies[0].rows;
    var debugStr = "rows now: ";
    for (var i=0; i<rows.length; i++) {
        debugStr += rows[i].id+" ";
    }
    document.getElementById('debug').innerHTML = 'row['+row.id+'] dropped<br>'+debugStr;
}

In fact if you look at the source of this page you can see how I implemented the debugging information displayed as you drag rows in the demonstration table at the beginning of this article.

Bells and whistles

Here’s a final example showing that you can have two separate tables on the same page, that you can support INPUTs
SELECTs, and header rows which aren’t draggable or droppable:

Label	Value	Input
Category 1
1	One
2	Two	Two
3	Three	Three
Category 2
4	Four
5	Five	Five
6	Six

Note there is a problem with IE6 in that when you drag a row that has either a checkbox or a radio button in it, these get set back to their initial settings (well, it seems it’s a bit more complicated even than this–try it with the two radio buttons above). As far as I know this is fixed in IE7. If it’s crucial for you to support this, you would have to capture the state of the form elements on mouse down and then go through and reset them on mouse up. It only applies to radio buttons and check boxes on IE6, Safari and Firefox are fine, and select and text input tags are fine.

Resources

Download the javascript source – the class ready for use in your web pages
Script.aculo.us – an excellent javascript library
How to Drag and Drop in Javascript – a good guide to how drag and drop works and how to do it for other types of element.

Tags: Drag & Drop, Javascript, Web development

This entry was posted on Sunday, July 1st, 2007 at 2:23 pm by DenisH and is filed under Articles, Web development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

112 Responses to “Dragging and dropping table rows in Javascript”

brian Says:
January 31st, 2008 at 3:15 am
Very handy information, thanks! Is there a clean way to get the row that was replaced by the drag operation? For example, when using this to sort items in a table we’ll typically want to know the dropped row and the target row so we can extract information to send as a call to the server. I was thinking of just using the row above the dropped row and sending both of those ids to the server (which should be enough information for it to infer what happened).
brian Says:
January 31st, 2008 at 3:42 am
Actually, to answer my own question, I just check previousSibling (after making sure I don’t get a whitespace text node, etc.) and use that.

One other helpful code snippet would be a check in onDrop() to see if a row wasn’t actually dropped (it acts as if a drop occurred if you just click on a row and not move it).
Scott Says:
February 9th, 2008 at 2:19 pm
Hi; very nice script, I’m trying to implement it and am very impressed. I was wondering, is there any way to make it so that the “moving crosshairs” (don’t know if I described that right…) only appear over one cell, yet when you click, it moves the entire row?
denish Says:
February 11th, 2008 at 9:03 pm
The best way to do this would be to use styles. Alter the CSS styles of the table so that only one cell has the move cursor, the rest of the script will work in the normal way.

[Added later:] In fact at the moment the makeDraggable method specifically sets the mouse pointer style of the draggable rows. A better approach would be simply set the class of the rows to (say) “draggable”. In your stylesheet you could then define
```
.draggable td {
    cursor: move;
}
```
Now to make only one cell in each row has the move cursor, then make sure that that this cell also has the style (say) “keycell” and then alter the CSS to
```
.draggable td.keycell {
    cursor: move;
}
```
So the draggable class is applied to the whole row, but only the keycell TD has the actual cursor even though dragging on any cell will work.
David Says:
February 18th, 2008 at 9:51 pm
Very nice script. I am working on reordering a large list of table rows. So I need to have an ability to auto-scroll the window if the dragged table row has been moved beyond the visible window boundary. So how do I do it?

Thanks,
denish Says:
February 19th, 2008 at 3:50 pm
What you need to do is to enhance the onmousemove method to check where the mouse is in relation to the visible window. You can do this with something like:
```
    var yOffset = window.pageYOffset;
    var currentY = event.pageY;
    if (document.all) {
        yOffset=document.body.scrollTop;
        currentY = event.clientY;
    }
```
(I haven’t checked this with IE, but the principle should work.) This gives you the current scroll offset (yOffset) and the current y position (currentY). If they are the same, then you’re at the top of the visible window, if they’re equal to height of the window, then you’re near the bottom. You can then use window.scrollBy(0, -5) if you’re at the top and window.scrollBy(0, 5) if you’re at the bottom. This should give you the functionality you need.

David Says:
February 19th, 2008 at 8:40 pm

Thanks a lot for your suggestion.
Actually it works with Firefox well, but as you suspected it does not work with IE 7 I use. It can scroll down, but the dragged row is not moved with mouse. I am stacked again. Can you let me what is wrong in my codes? Thanks,

Here is the code.

document.onmousemove = function(ev){

    if (currenttable && currenttable.dragObject) {
        ev   = ev || window.event;
 	var mousePos = currenttable.mouseCoords(ev);

        //auto scroll the window
	var yOffset = window.pageYOffset;
	var currentY = mousePos.y;
	if (document.all) {
	    yOffset=document.body.scrollTop;
	    currentY = event.clientY;
	}
	if (currentY-yOffset< 100) {
	    window.scrollBy(0, -5);
	}

	var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ?
                  document.documentElement.clientHeight : document.body.clientHeight;

	if ((windowHeight-currentY +yOffset)  currenttable.oldY;
        // update the old value
        currenttable.oldY = y;
        // update the style to show we're dragging
        currenttable.dragObject.style.backgroundColor = "#aaa";

        // If we're over a row then move the dragged row to there so that the user sees the
        // effect dynamically
        var currentRow = currenttable.findDropTargetRow(y);
        if (currentRow) {
            if (movingDown && currenttable.dragObject != currentRow) {
                currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
            } else if (! movingDown && currenttable.dragObject != currentRow) {
                currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
            }
        }
    }

    return false;
}

DenisH Says:
February 20th, 2008 at 7:12 pm

I think that maybe the code sample you submitted was slightly corrupted? Anyway, here’s a version that seems to work for both Firefox 3 beta 3 and IE6:

document.onmousemove = function(ev){
    if (currenttable && currenttable.dragObject) {
        ev   = ev || window.event;
 	var mousePos = currenttable.mouseCoords(ev);
        var y = mousePos.y - currenttable.mouseOffset.y;

        //auto scroll the window
	var yOffset = window.pageYOffset;
	var currentY = mousePos.y;
	if (document.all) {
	        yOffset=document.body.scrollTop;
	        currentY = event.clientY;
	}
	if (currentY-yOffset < 5) {
	    	window.scrollBy(0, -5);
	} else {
            var windowHeight = window.innerHeight ? window.innerHeight
                    : document.documentElement.clientHeight ? document.documentElement.clientHeight
                            : document.body.clientHeight;
            if (windowHeight-currentY-yOffset < 5) {
                window.scrollBy(0, 5);
            }
        }

        if (y != currenttable.oldY) {
            // work out if we're going up or down...
            var movingDown = y > currenttable.oldY;
            // update the old value
            currenttable.oldY = y;
            // update the style to show we're dragging
            currenttable.dragObject.style.backgroundColor = "#aaa";

            // If we're over a row then move the dragged row to there so that the user sees the
            // effect dynamically
            var currentRow = currenttable.findDropTargetRow(y);
            if (currentRow) {
                if (movingDown && currenttable.dragObject != currentRow) {
                    currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
                } else if (! movingDown && currenttable.dragObject != currentRow) {
                    currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
                }
            }
        }

        return false;
    }
}

DenisH Says:
February 20th, 2008 at 7:15 pm
By the way, I’ve now added a JQuery plugin version which incorporates this auto-scrolling and provides easier ways to customise the behaviour.
JerryW Says:
March 5th, 2008 at 10:50 pm
Awesome script! I have been looking to do something like this and it is a great help. I noticed in IE6 that if you grab the cell with the dropdown list and drag it quickly, the screen goes blank until you stop moving the mouse. Have you seen this behavior and do you have any idea what might be causing it?

Thanks!
Ratan Says:
March 6th, 2008 at 6:49 pm
Excellent script. Can anybody send me the code for getting the target row id as well as dropped row id in onDrop method?
Andre Says:
March 28th, 2008 at 10:42 am
How can I move 2 or 3 row at the same time? For examole, I have categories and I want to drag categories with subcategories.
DenisH Says:
March 28th, 2008 at 10:50 am
I’m afraid there’s no way currently to drag multiple rows. I think the approach you would have to use is to have multiple TBODYs and then move the TBODY whenever a row is dragged. But that wouldn’t be an extension to this code, you would have to use this as inspiration and implement the methods differently. Sorry!
sagar kar Says:
March 28th, 2008 at 2:07 pm
Just what I was looking for.
Excellent work.
Richy Says:
April 8th, 2008 at 5:43 am
Thanks for the article. But i want to do it like, keeping the first cell stable and moving around the row with all other cells. Hope u can help me out. Thanks in advance
stephane Says:
April 9th, 2008 at 2:16 pm
very nice and useful article !
I noticed that :
currenttable = self;
is missing in the makeDraggable function
jeremy Says:
April 10th, 2008 at 1:06 pm
you’re really amazing you just save my life i’ve been trying to do something like that for a month….
i just have a little probleme, if I have 2 tables (the second one is included in the first) and i want to apply this code on both of them, what do i have to change?
here is the code:

Task 1
Step 1-1

Task 2

Step 2-1

Step 2-2

Step 2-3

i want to apply the code for the table 1&2
plz help
jeremy Says:
April 10th, 2008 at 1:09 pm
the code just disapeard
here it is:

Task 1
Step 1-1

Task 2

Step 2-1

Step 2-2

Step 2-3
Arthy Says:
April 16th, 2008 at 12:49 pm
I am relatively new to Javascript.

This is really a great code. I am trying to use it in my project.
I am having a problem. I need to move rows from one table to another.
I initialized both tables in the window.onload event. Now I am able to move rows only within the two tables. I am not able to move it from one table to another.

I think I need to change something in the method findDropTargetRow. But not sure how to enable it to move to another table.

Am I missing out something obvious? Can anyone please help me?
ChrisMN Says:
April 21st, 2008 at 2:50 am
Brilliant. Thank you!
Swati Says:
April 22nd, 2008 at 5:33 pm
Wow! This is really cool and smooth. I had to make no modifications or do much reading to make it work on my page. It’s as simple as plug and play. I feel little guilty to use this . But I think I am gonna use it.

Thanks DenisH . You rock
Ben Edwards Says:
April 25th, 2008 at 2:24 pm
I too would love to know if this can accommodate dragging rows between tables like Arthy says above. Any idea on this before I jump in?
DenisH Says:
April 25th, 2008 at 2:44 pm
Hi folks,

Sorry for not replying before, to be able to drag between tables, you’d need to change quite a bit. First you’d have have to change the code that finds the row so that it looks at the table under the mouse, rather than the current table. Then when you’ve got the right row, you’d need to change the code that re-parents the row so that it can deal with removing it from one table and adding it to the other.

If Ben or Arthy you do decide to generalise the code, then please let me know how you get on and I’ll post your updates and credit you.
Terry Says:
April 27th, 2008 at 10:13 pm
Hi there!

This is the best table sortable script.

However I’m having some troubles when I have rows that have different heights. It works great but only if you drag from the top of the row you want to drag. If you want to drag from the bottom of the row, you have to drag more.

Any idea for a solution?

Thanks.

T.
DenisH Says:
April 28th, 2008 at 9:53 am
Hi Terry,

Do you think that this is due to a error in the maths? Or some artifact of the content of the rows? If you make the row height very large, does the top half (exactly half) work and the bottom not? Is it the same when moving up and down? To work out which row we’re over I use a few heuristics (in findDropTargetRow() described above and it’s possible that these are too simple when the rows are different heights. I would put some debugging in that showed which row the code thinks its over as you move the mouse and that should give you a better idea of what’s going wrong.

If you do come up with an improvement, please post it back here
Terry Says:
April 28th, 2008 at 10:26 pm
Hi DenisH,

I’ve put some debugging information and I believe that the problem is when it calculates the other rows position. I’m going to see what I can come up with a solution and I’ll definitely post it here.

Thank you for responding to me and keep up the great work.

Terry
Terry Says:
April 30th, 2008 at 6:17 am
Hi there,

I’ve been trying to find a fix for the different row heights but with no luck.

If anybody could help me with a solution, that would be awesome.

Thank you,

T.
Bob Says:
May 1st, 2008 at 9:22 pm
Hi,

Does anybody have experience in writing classic ASP code using JQuery and this great plugin to update an Access database with the new sorting order (one table)?

Any help appreciated (even paid for).

Thanks!

Cory Crosland Says:
May 3rd, 2008 at 8:35 pm

Great plug-in!

I fixed the multiple tbody error by altering the following lines – hope this helps:

Line #226 (added try/catch to suppress the error if any):

 try {
    jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow.nextSibling);
 } catch(e) {
 }

Line #228, same:

try {
  jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow);
} catch(e) {
}

Aashi Says:
May 3rd, 2008 at 11:06 pm
Hi tried your code for drag and drop.
Somehow, the line is causing problems for me. If I dont use this (below the tag) I do not get the selector mouse (crosshair) to drag a row. What should I do to get rid of this. I am making a mock up which would be only in my laptop and not on any server. I am using a Mac, will it matter? HELP !!
Aashi Says:
May 3rd, 2008 at 11:06 pm
Forgot to mention…the base tag is causing issues for me. Can I get rid of this in any way??
Max Says:
May 7th, 2008 at 2:37 pm
hello, i have a table that have two colors gray and white (like these comments), what i want to do is to change the color of the table when i drag a line (i want the table to become white)
does anyone knows how to do it?
plz hellllp

and if you have an answer to jeremy’s answer that would be great

thanx for your help and that great code
waleed Says:
May 10th, 2008 at 3:28 pm
i have download the javascript of drag and drop table rows but i cant find any code how to attach this with our code…
plz tell me about it … its very important…i’ll fine that code after a great struggle…
thanks…
waleed
Michele L Says:
May 14th, 2008 at 10:29 pm
Hi, I saw your script and love it! I was able to implement it but I am not sure of how to pass the new order to the next page. Can you help? I’m not a newbie…well…in this case I am.

Thanks

MT
Brindu Says:
May 15th, 2008 at 1:06 pm
Hello everyone,

Loved the code that drag and drops rows.
The only thing I have an issue with is in “Bells and whistles
“. The “two separate tables on the same page” is actually one table.
Unfortunately that is what I am trying to accomplish for some time now:
allow the moving of a row from one table to another. What exmpples I found, using scriptaculous, work only on Firefox.
My efforts proved to be useless so far and unfotunately time is an issue.

Any advice?

Thank you,
Brindu
CSS Tab Navigation Creation Made Easy | iZone Design Blog Says:
May 15th, 2008 at 9:44 pm
[...] to Isocra for their ultra cool drag-n-drop script and Mark Kahn for his awesome color picker. Posted in Web [...]
DenisH Says:
May 26th, 2008 at 11:14 am
Hi Michele and Brindu. I’m not really continuing to develop this code. I’ve concentrated on the jQuery plug-in. It does all of the stuff you need above, but also provides ways (and examples) to post the information back to the server. It copes with 2 separate tables, though it’s not yet possible to drag from one table to another (but I’m planning to add that soon).

Have a look at the jQuery Plugin version. It doesn’t require much overhead, and JQuery adds loads of useful stuff at very little extra work.
Patrick V Says:
June 3rd, 2008 at 8:10 pm
Super script! I only experience one bug in ie7, the script seems to recreate all table lines over the selected table. And it’s creates unwanted space between my text and the table (and it’s just horrible if table rows have background color!) Any clue why that happens?
Patrick V Says:
June 4th, 2008 at 1:13 pm
My Bad, wasn’t cause by the script! AWESOME SCRIPT!
Pine Says:
June 10th, 2008 at 12:05 am
In the last example, how do i get the row, and the category on where it is drop? I can only get the row, not the category ;(
I cant update the DB without that info, after all, the name was moved from a category to the other…

DenisH Says:
June 10th, 2008 at 7:53 am

Hmm, that’s a good point! The only way I can think of without changing the underlying code is to loop through the rows noting the current category until you find the row that has been dropped So something like (NB this is off the top of my head and untested):

tableDnD.onDrop = function(table, row) {
    var rows = this.table.tBodies[0].rows;
    var currentCategory = null;
    for (var i=0; i<rows.length; i++) {
        if (rows[i].className = "category") {
            currentCategory = rows[i].id;
        }
        if (rows[i] == row) {
            break; // we've got to the current row so stop
       }
    }
    document.getElementById(’debug’).innerHTML = ‘row[’+row.id+’] dropped’+debugStr;
}

This assumes that your categories also have the class “category” (or you could use whatever you like instead of course). Hope this helps.

Pine Says:
June 10th, 2008 at 12:08 pm
Thanks a lot Denish, I’ll try that…

By the away, something is wrong with the comment list, check:

http://img204.imageshack.us/my.php?image=commentsys4.jpg

I assume it was a IE7 problem and i saw the HTML SOURCE and got the code right, but not on the list…
Regards,
Pine
DenisH Says:
June 10th, 2008 at 1:10 pm
Hi Pine,

No it’s not an IE7 problem, it’s a “quality control” problem. I left a < in instead of escaping it. Doh! That’ll teach me to reply to posts before 8am. I’ve fixed the post so it reads right now.

Pine Says:
June 10th, 2008 at 1:24 pm

I tried the code and did some changes, i’ll post it for other people to use:


tableDnD.onDrop = function(table, row) {
    var rows = this.table.tBodies[0].rows;
    var parameters = ""; // to use in ajax request
    var currentCategory = null;
    for (var i=0; i<rows.length; i++) {
        if (rows[i].className == "category") { // correct the = on previous post, its ==
            currentCategory = rows[i].id;
        }
        if (rows[i] == row) {
            parameters += '&movedid='+rows[i].id+'&position='+i; // Join Moved Name and new Position
            break;
        }
    }
    parameters += '&categoryid='+currentCategory; // join Category Id
    document.getElementById('debug').innerHTML = parameters; //debug
}

Prasanna Says:
June 24th, 2008 at 2:21 pm
Iam getting problem while using this js file. If i have menuitems ifor menus in my jsp, the row is not getting dropped.Can anyone say whats the reason and how to overcome this issue?
Mevima Says:
June 25th, 2008 at 10:59 pm
Did anyone figure out how to drag from table to table? I’d rather use prewritten code than have to design something that’s already been done.
dario Says:
June 30th, 2008 at 6:29 pm
Hi, my table is inside a form, so the user moves the rows of the table and then submits the form. When the form is submited the fields of the row that the user moves are not present in document.myform.elements[]. Does anyone have an idea why is this hapenning?? thanks
Patrick V Says:
July 10th, 2008 at 2:21 pm
Anyone have figured how to make the rows draggable while scrolling the page. So the user don’t have to drop the row and scroll and then re-click then row and continue dragging?
mario Says:
July 13th, 2008 at 11:48 pm
Does anyone know PHP version of it ???
Paul Says:
August 4th, 2008 at 11:15 am
Added TEXTAREA to target.tagName check so that textareas are editable

// Need to check to see if we are an input or not, if we are an input, then
// return true to allow normal processing
var target = getEventSource(ev);
if (target.tagName == ‘INPUT’ || target.tagName == ‘SELECT’ || target.tagName == ‘TEXTAREA’) return true;
stevoo Says:
August 5th, 2008 at 12:08 pm
Very nice script.
Simpler from the others that i found.

But i am want to forward the rows after sorted. How will i still the rows input values and pass them on ?
Nikki Says:
August 11th, 2008 at 7:02 pm
Can anyone post the html code for using this javascript
Kaushal Patel Says:
August 19th, 2008 at 11:17 am
Hi,

I have alerady implemented this drag-drop functionality using webtoolkitdrag.js which is available on that.

Still i am facing one new issue.

I want to implement functionality like if i drag object on any other control (lik Table, Row or any window control),
i want to apply border on that destination control(in my case Table, Row or any window control).

Question is that, how can i capture that is there any draggable object is there in memory while i am dragging any object on destination control?

So that, on mouse hower of my destination control, i can check that there is one draggable object in memory, and i can apply border to my destination control.
Kasper Says:
August 19th, 2008 at 12:18 pm
This is an awesome script .. it did the trick i needed with minor mods.. I could kiss you .. but i´ll just say thanks thanks thanks !!!
Sam Says:
September 19th, 2008 at 10:23 am
Wow!!!……… this is an excellent script that I am going to use in my job portal development. Earlier I hv seen just drag and drop for shopping cart. This kind of reordering is excellent. Good Work!
Amy Says:
September 22nd, 2008 at 11:01 pm
I am having a hard time figuring out what the row # WAS that it was moved from. I have a view order input text box that I need to update for each row after the row is moved. Do you know how to get that info?
DenisH Says:
September 24th, 2008 at 10:30 am
The thing is that the original row number is a fairly application specific thing. You know which row has been dropped and a common approach is to label each row with a row ID, so row_1, row_2, etc. If you do this to start with, then in the onDrop method you will know the row number. You can then optionally renumber all the rows with new IDs in order so that when the user drags another row, you know which number it was when it was picked up.

If you don’t want to use IDs for it, you can write a simple jQuery line to number the rows with a bespoke attribute something like

$(“#myTable tr”).each(function(rowNum) { row.rowNumber = rowNum } )

If you do this in the ready function, all your rows will have a rowNumber and you can access it in the onDrop as above.
Timbo Says:
September 25th, 2008 at 1:52 pm
This is nice code, but I’m having trouble dragging and dropping in a dynamically created table: (actually, the rows are dynamically created, not the table itself)

Selected Info

I have tblCells, it’s rows are created by code as a user makes selections on the web page. When I invoke the script

var table = document.getElementById(‘tblCells’);
var tableDnD = new TableDnD();
tableDnD.init(table);

the only thing I can drag is the table header! I can make the code work on a page with a “hard coded” table …

Any thoughts?
Thanks,
Tim
Timbo Says:
September 26th, 2008 at 4:41 pm
Disregard the previous post! I can now drag and drop most of the time, with the occassional ‘ev’ doesn’t exist message.

After I’ve moved a few cells around, I programatically move through the table, and the cell data is unmoved. Say I have a table with 1, 2, 3, 4, 5 in it. I rearrange the cells to visually be 3, 1, 5, 4, 2, but when I read the table, it is still 1, 2, 3, 4, 5 …

Any ideas?
Christophe Says:
September 27th, 2008 at 7:52 pm
Very nice script. But do you have any idea how to work with embedded tables?
Example:
Topic 1
Item 1.1
Item 1.2
Topic 2
Item 2.1
Item 2.2
Item 2.3

I created a TableDnD() object for the topics + 1 for each sublevel. This is not working, only the first level works.
Sandhya Says:
October 1st, 2008 at 11:30 am
Wow! Simply wow! I was infact looking for something else but this piece doesn’t look as though it’s done using JS and HTML. Simply amazing! Nevr knew thwy can do so much
Personal Wiki for Khai: Javascript Articles Says:
October 5th, 2008 at 11:48 pm
[...] standard DOM event methods for Internet Explorer Dynamic Duo Drag and Drop WebReference IEgrab Dragging and dropping table rows in Javascript WebReference How to Drag and Drop in Javascript Quirksmode The CSSOM View Module John Resig [...]
zedwood Says:
October 6th, 2008 at 6:14 pm
Nice drag and drop tables. There seems to be no limits as to what javascript can accomplish. I built a Javascript DHTML Drag and Drop Floating Div which uses similar principles. One thing I noticed is that you aren’t using object oriented javascript yet. Check it out in my code… it makes your code more portable, and prevents namespace collisions better.
David Says:
October 9th, 2008 at 9:35 pm
I really like your idea to make an Ajax call to let the server know the new order of rows once the row has been dropped. In the project I am working on, it would be very nice to be able to use your approach to update the rows in the server side. Can you share what you have had if you have workable codes? Thanks.
ediconu Says:
October 10th, 2008 at 6:16 pm
Love the code as well. I have a page that loads its contents through an AJAX call. The AJAX-result has a lot of functions that call javascript from the original window and all of those calls work. I included the init script call in the ajax-stuff, so the table will exist when the call to initialize dragging is made. My problem is that the code is not executing at all. It’s like the events that you have setup only apply to the original window and are not applied to the AJAX div contents.

If you have any quick ideas of how to make this work correctly, I’d love to hear them.

Thanks,
Mike
ediconu Says:
October 14th, 2008 at 11:29 am
Answered my own question… All Javascript goes on the main page, so the ‘initialization’ function has to be called somewhere else. At first I had the initialize script in the AJAX response like in this page, where after </table> it has <script> for the initialize step. I changed this and it started working perfectly.

I used a cheat method and added an image tag below the table with an ‘onload’ function set to call a pre-built initialize function.

If there’s a more proper way to do this, I’d appreciate the hint.

Thanks,
Mike
malaki1974 Says:
October 21st, 2008 at 2:47 pm
Great script! Any way to save the current state of the rows so that next time I look it is the same?
rxwhore Says:
October 24th, 2008 at 5:25 pm
Great script! For those asking about adding sub tables…I found an easy fix that seems to work just fine. When onmousedown is added, do a check to make sure currenttable is null before setting it, then you can allow for multiple levels there. I tried this with one table in side of another and they both were able to do drag drop, with the second table dragged as a sum of it parts
Sam Says:
November 21st, 2008 at 2:51 am
Excellent script! Saved me a lot of heart ache. Thanks!
Wilson Says:
November 26th, 2008 at 12:05 pm
Like everybody else i appreciate this script, but as it turns out that im quite a noob with javascript and ajax I was wondering how the onDrop function would look like if you want to store the results in a database? I have no problem reading and understanding JS, but I havent written that much and the PHP part won’t be a problem at all…

Can someone please help me? I know it’s not the biggest deal, but I would greatly appreciate all help..

Thanks
Bering Says:
December 11th, 2008 at 4:54 pm
Really good script!

I modified it so the onDrop function is only called when the row changed place. Here’s what I did:

#1 In the function makeDraggable I added:
item.startupPosition = self.getPosition(item);

#2 In document.onmouseup: I added, just before the call to onDrop():
if( droppedRow.startupPosition.y != currenttable.getPosition(droppedRow).y)

Have fun
Stephan Says:
December 20th, 2008 at 9:43 pm
Absolutely perfect!

On my site I have registered a click event with the table row. When using TableDnD this event is fired even after a row is moved. So here is little modification to prevent annoying feature:

1. Declare a global variable after ‘var currenttable = null;’:
/** Keep hold of moved table row */
var justmoved = null;

2. At the end of document.onmousemove() insert the lines just before the ‘return false;’:
// We have just moved this row
justmoved = currenttable.dragObject;

3. In item.onmousedown() (nested in this.makeDraggable()) insert again one line just before the ‘return false;’:
justmoved = null;

Now you can check the variable ‘justmoved’ in your onclick event handler like this:
// Bail out if the row was moved
if (justmoved) return;

BTW you can implement Bering’s changes with the following code:
#1 In the function makeDraggable add just before the ‘return false;’:
self.justmoved = null;

#2 In document.onmouseup add just before the call to onDrop():
if (currenttable.justmoved)

#3 In document.onmousemove add just before the ‘return false;’:
// We have just moved this row
currenttable.justmoved = currenttable.dragObject;

Thanks!
Codecranker Says:
December 27th, 2008 at 1:51 pm
What if the rows contain a link? I can move the rows around but I cannot click on the link in one of the columns in each row. Great script!

AdamR Says:
January 5th, 2009 at 8:07 pm

DenisH, in your scroll example (feb 20th), I believe there are a couple of missing parens:

            var windowHeight = window.innerHeight ? window.innerHeight
                    : document.documentElement.clientHeight ? document.documentElement.clientHeight
                            : document.body.clientHeight;
            if (windowHeight-currentY-yOffset < 5) {
                window.scrollBy(0, 5);
            }

shouldn’t this be
. . .
if (windowHeight-(currentY-yOffset) < 5) {
. . .

otherwise, when your currentY is greater than your yOffset, you will scroll down when attempting to scroll up.

RSanchez Says:
January 21st, 2009 at 10:01 pm
I can’t seem to be able to use this with a table that dynamically has rows added and removed from it. I get the error “table.tBodies[0] is undefined.” It probably isn’t possible with this script, but it would be nice if that functionality was added.

RSanchez Says:
January 26th, 2009 at 7:56 pm

To make this function for a table where you can dynamically add and remove rows, and which has no rows when the page is loaded, first modify the init function by wrapping

var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
            for (var i=0; i<rows.length; i++) {
                            // John Tarr: added to ignore rows that I've added the NoDnD attribute to (Category and Header rows)
                            var nodrag = rows[i].getAttribute("NoDrag")
                            if (nodrag == null || nodrag == "undefined") { //There is no NoDnD attribute on rows I want to drag
                                    this.makeDraggable(rows[i]);
                            }
            }

with

if (typeof table.tBodies[0] != "undefined") {
...
}

Afterwards, in the function where you add a table row, make a call to the makeDraggable method to make that row draggable. I just added an extra function name “addDraggableRow” to avoid confusion, but calling the same function with the new row as a parameter works.

Vijay Says:
February 3rd, 2009 at 8:50 am
it’s a very useful for the web developer and they can easily change the row
Vijay Says:
February 3rd, 2009 at 8:51 am
Like everybody else i appreciate this script, but as it turns out that im quite a noob with javascript and ajax I was wondering how the onDrop function would look like if you want to store the results in a database? I have no problem reading and understanding JS, but I havent written that much and the PHP part won’t be a problem at all…

Thanks a lot
RSanchez Says:
February 4th, 2009 at 7:19 pm
It really depends on what you want to store to the database. If, for example, you wanted to store the text of the first column within the row, what I would do is (using jQuery):
```
this.onDrop = function(table, droppedRow) {
    $.post("database-script.php", {columnText: droppedRow.getElementsByTagName("td")[0].innerHTML},
        function(result) {
            result1 = result.result1;
            result2 = result.result2;
            //etc
       }
    );
}
```
Note here that in the PHP script, I would store the results into an array: $result = array(“result1″ => $result1, “result2″ => $result2) and I would print json_encode($result) so that the callback function on the javascript side can use the returned data.
Simon King Says:
February 5th, 2009 at 9:17 pm
Great script. I was using this to reorder items in a database (in a PHP script). The way I achieved this was by putting a hidden field in each row. The hidden fields formed an array.

For example:
<input type=”hidden” name=”_order[]” value=”" />

Then when you submit this form, handle it like so:
```
if (isset($_POST['_update_order'])) {
  foreach ($_POST['_order'] as $order => $id) {
    db_query("update #__menus_items set item_order = $order$ where item_id = $id");
  }
  $message_stack->add('Success!','Menu items save successfully', 'success');
}
```
Simon King Says:
February 5th, 2009 at 9:20 pm
There is some weird stuff going on with your comment system but I hope you get the idea from the example above.

Please note that the hidden fields value must be the id (primary key) of the item you’re wanting to order. The example above shows the value as empty.
kiran Says:
February 9th, 2009 at 6:50 am
I am new to JavaScript world.Please help me on drag multiple rows from one table to another table.Please provide me the details if it is already(Examples or Demo or Download) implemented.

Thanks a lot
manasa Says:
February 17th, 2009 at 6:22 am
script is very nice and it is working fine in mozilla 3.0 version. bur getting the problem in IE7(Internet explorer7) in Scriptaculous.js page.
Lyrgard Says:
March 12th, 2009 at 12:19 pm
Hello

First, thanks a lot for this script, it is very useful !

I have an little improvement suggestion to submit to you

I used your script to allow user to reorder a table by drag and drop. This tables was created with the strut-layout collection tag, and have different colors for odd and even numbered rows.

by implementing the onDrop fonction, it was easy to set again the colors after a drag and drop, but during the drag the colors remain still on each rows, including the moving one, thus leading to have two successive rows having the same color.

I added a onRowMove function in your library (copy paste from the onDrop function) and added a call to this fonction in the onmousemove function, at the end, there :

if (currentRow) {
if (movingDown && currenttable.dragObject != currentRow) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow.nextSibling);
} else if (! movingDown && currenttable.dragObject != currentRow) {
currenttable.dragObject.parentNode.insertBefore(currenttable.dragObject, currentRow);
}
currenttable.onRowMove(currenttable.table);
}

Then, by overriding this function and make it reassign colors, I achieved to have the comportment I wanted

I think others people may find use of this function, so perhaps you could put it in your code. Perhaps also add two arguments to it, for the two rows exchanging place.

It was my two cents suggestion.

Thanks again for this fine piece of code !
Toby Says:
March 24th, 2009 at 9:07 am
I’m experimenting with interactive tables as a means for creating market segment profiles (and other profiling) with each row being a segment attribute. DenisH’s drag and drop technique (as is) works fine and is ideal for this. I’ve also added features to remove, add and edit rows.

However, I need the table to ‘feel’ more interactive and so want each row to highlight as the mouse moves over it. I’ve added onmouseover & onmouseout event calls to each row (below) which works fine until I click on a row, after which it stops highlighting even though the events still call the functions. Can anyone suggest a cause and solution? (New to JavaScript and DOM)
```
function rowOver(obj){
	var row=obj;
	//some validation etc?
	row.bgColor="#99FFFF"
}

function rowOut(obj){
	var row=obj;
	//some validation etc?
	row.bgColor="#CCFFFF"
}
```
Anonymous Says:
March 28th, 2009 at 6:25 pm
@Toby

Use CSS instead of javascript to create the hover effect.

table tr { background-color:#CCFFFF; }

table tr:hover { background-color:#99FFFF; }
JP Says:
May 1st, 2009 at 5:07 pm
Is there a reason why there is no sample download package? For those of us that are trying to learn, and want to tinker with something that works to begin with on our own sites, it would be very helpful. I’d like to see a zip download that has the html, css and js for the bells and whistles version. I’m looking to rewrite my fantasy football software, and think this would be a cool feature for activating/benching players. I have found a package that uses jquery for this, and it works, but I think there may be a better way and I think your js is better. Just cant figure out how to get it working!
RG Says:
May 20th, 2009 at 8:07 pm
Thanks for sharing this excellent script! Maybe I am missing something, because I am very new to DOM, etc., but how could I change the value of a hidden input that contains the row order so that the new row order is 1,2,3,4,etc. instead of 2,1,3,4,etc.?
DenisH Says:
May 21st, 2009 at 4:47 pm
Hi RG,

You could use hidden inputs and re-order them in javascript before you post the form, but a potentially even easier way is to call all inputs the same thing and then you’ll get an ordered array back at the server with the original ids in the new order. If you look at Simon King’s post on Feb 5th above, he shows you how to make it work in PHP (you need to add the trailing [] to the name of the field for it to work).
DenisH Says:
May 21st, 2009 at 4:57 pm
Hi RG,

You could use hidden inputs and re-order them in javascript before you post the form, but a potentially even easier way is to call all inputs the same thing and then you’ll get an ordered array back at the server with the original ids in the new order. If you look at Simon King’s post above, he shows you how to make it work in PHP (you need to add the trailing [] to the name of the field for it to work).
JohnV Says:
May 27th, 2009 at 3:08 pm
Issue with collapsiblepanelextender

Hi – I have a table utilising this functionality which contains a number of collapsible panel extenders
The issue here is that once a panel is expaned it cannot cannot collapse again

Anyone come across this & know how to fix it ??
Alberto Benati Says:
June 6th, 2009 at 10:32 pm
I am a noob in this area.
I have a tree/nested table and I have build several methods for move nodes in a CMS.
Script work well but it’s important for me to retrieve the target id (in other case I must take old order, new order and check difference).

In second post (January 31st, 2008) brian says:
“previousSibling (after making sure I don’t get a whitespace text node, etc.)”

I have implemented but it’s not clear the testing of this.
Someone can put me on the right way.

Thank you and sorry for my english
JF Kelley Says:
June 15th, 2009 at 5:05 pm
Fabulous.

One suggestion: An option to disable the temporary setting of the row’s background color (which you do to #eee on drag and then to transparent on drop).

In my limited testing, it doesn’t seem to harm anything to disable that.

Reason: We might want to have an onDrop function to stripe/re-stripe the table (mine does dynamic assignment of evenRow and oddRow classes). Also, there may be other bg colors in use based on className’s (like selected rows).

I think that the explicit setting you do of the bg color overrides the bg value in the classeName’s that are assigned.
Ftezcan Says:
June 24th, 2009 at 10:49 am
good work thanks. but i want to ask a question. i am learning javascript newly and don’t know very well. so i couldn’t understand which method i must call firstly in my main code.

i have a table and different columns that have data and i want to drag and drop the colmns by sorting. and i will write a c# code for the java script and call the javascript codes from my main code.

i just want to know how can i do these with these codes, which method should i call firstly?..
Ftezcan Says:
June 24th, 2009 at 12:28 pm
hey i solved the problem i didn’t read the document carefully sorry. i succeeded what i need..
raluca Says:
June 29th, 2009 at 5:05 pm
Super nice. Thx!
dimche Says:
July 29th, 2009 at 5:46 pm
Hi all!
I think today found some bug %)
I have the table with expanded subgrid row (plus button was pressed) and if i try to grag it – row will draged but subrow stay frozen on old position.
I think this problem easy to solve… when the drag starting we have to collapse dragging row…
some think like this
onDragStart: function(table,row){$(table).collapseSubGridRow(row.id)}
it is correct? in my case it work ok.

sorry for my english, usually i speak russian
Amy Says:
July 29th, 2009 at 9:00 pm
GOING BACK TO THIS QUESTION:
I am having a hard time figuring out what the row # WAS that it was moved from. I have a view order input text box that I need to update for each row after the row is moved. Do you know how to get that info?

AND THIS ANSWER:
The thing is that the original row number is a fairly application specific thing. You know which row has been dropped and a common approach is to label each row with a row ID, so row_1, row_2, etc. If you do this to start with, then in the onDrop method you will know the row number. You can then optionally renumber all the rows with new IDs in order so that when the user drags another row, you know which number it was when it was picked up.

SO… I need to name the rows = BUT then how do I reference the row id in the javascript so that I can then change the number to the new row location?
RG Says:
August 19th, 2009 at 1:37 pm
I’ve noticed that the “auto scroll” in IE is not very smooth when it comes to actually scrolling. I’m not using JQuery, however, I also have tried the code that you developed for that version of “auto scroll.” Any thoughts on how I could make the scrolling action smoother?
Mallikarjun Says:
August 20th, 2009 at 8:55 am
Hi All -

Can anyone please tell me how i can enable and disable this feature based on some condition ?

Thanks in advance !!

Malllikarjun
ColdFusion Developer Says:
September 20th, 2009 at 12:38 am
@Mallikarjun

If you wrap the init script with a javasript if function you should be able to turn it on or off based on just about anything.
alain Says:
September 23rd, 2009 at 9:13 am
Hello

With FF, if I click on the check box and after I drag the line 2, the input does not change, but with IE6, the input is cleared.
Why ?
mike Says:
October 2nd, 2009 at 6:13 pm
hi, great code! got it working fine. was wondering if it can be easily modified to swap TBODYs in a table instead of rows?
> Evil E. Says:
October 24th, 2009 at 3:49 pm
@ RG (19 Aug 2009, 13:37 Hrs) :

I noticed the exact same thing. But I’ve noticed that there are 2 situations in which the web browser react differently :
(1) you’re not moving the mouse pointer whilst auto-scrolling
(2) you’re moving the mouse pointer left and/or right whilst auto-scrolling

In situation (1) IE will auto-scroll the page extremely slow (it seems like an interrupted scroll based on an interval), and in situation (2) IE will scroll the page more fluently…
I have a feeling that the slow/interrupted scrolling is caused by the lack of mouse events because of the static mouse cursor position. Maybe DenisH can provide us with an explanation why this occurs ?
DenisH Says:
October 25th, 2009 at 1:38 pm
Hi all,

Sorry for not being around to reply to comments over the last month, loads of paid-for work keeping me busy!

@alain: There are some differences between FF and IE when you drag a row because FF tries to be helpful and remember what you’d selected (you will have noticed that if you go back to a web page with radios and drop downs, quite often FF selects stuff even though it’s not [yet] selected in the HTML). So, it might be FF being helpful, it might also be that when I detach the row to re-add it in a different place in the TBODY, then IE is unsetting the state of the radio. Generally I reckon you’d have to write bespoke code to make sure that both browsers behave in the same way. It’s beyond the scope of this plug-in to drill down inside the row to see if there are any form elements. Sorry! You can use the events though to capture state and restore it.

@mike: I haven’t tried changing whole TBODYs. In theory of course it’s possible. You might like to look at the non-jQuery raw javascript version which you could tailor to your requirements.

@RG/@ > Evil: basically the way that the auto-scroll works is slightly browser-specific. It’s possible that there’s a bug in this (see source line 233 onwards). In fact there’s probably a neater (more robust) jQuery way of doing it? If anyone knows, let me know. I’ll try and look at it again in the next day or so.

In fact if anyone wants to help update the source and add new features, then please contact me at the obvious email address (this username plus isocra.com) and I’ll add you to the Google Code project
Saravanan Says:
November 6th, 2009 at 5:50 pm
i have trying this example which is not working. i have include following files. jquery.js, tablednd.js but which is not working. Please Tel me anyone what are the file include. how to implement this.
Saravanan Says:
November 9th, 2009 at 10:15 am
I have result 1,3,2,5,6,4 . when i render table 1 . I want to show following order 1,3,2,5,6,4. I want rearrange without drag. But table coding 1, 2, 3,4,5,6. Anyone can tel me.
prasad Says:
November 26th, 2009 at 10:28 am
good work! I never thought of creating drag and drop in javascript.

keep it up!
Nilesh Macwan Says:
January 12th, 2010 at 8:51 pm
Can we move Random row?. Can we have multiple row selection and drag and drop functionality? i want to move 1,2,4 to 6 postilion and then order will be 3,5,6,1,2,4
alexa'sdad Says:
January 25th, 2010 at 8:45 am
Wow this is a great tutorial! bookmarked in my site!
CSS Tab Navigation Creation Made Easy | Storm Development Blog Says:
January 25th, 2010 at 7:03 pm
[...] to Isocra for their ultra cool drag-n-drop script and Mark Kahn for his awesome color picker. Tagged in: [...]
westy Says:
January 28th, 2010 at 1:50 am
Is there any way to make a non-drag cell … similar to what can be done to a whole row with the noDrag=true?