Comments on: Dragging and dropping table rows in Javascript

By: Bill

Bill — Thu, 01 Dec 2011 12:30:24 +0000

Thanks Denis. I suspected that the ID’s were my roadblock. Appreciate the help! Keep up the great work.

By: DenisH

DenisH — Thu, 01 Dec 2011 11:26:10 +0000

Bill, you'll need to have some way of giving all the rows a unique identifier otherwise there's no easy way to get the new order. If you're repeating the first row using JavaScript, then you need to get it to put unique identifiers on the rows as it goes along. Ditto if it's generated from Cold Fusion server-side. If you've got form elements in the table rows and you're submitting the whole form, then you should get multiple values for each of the inputs and the order that you receive them should tell you which order the rows were in. In general, I would use our jQuery TableDnD plug-in rather than rolling your own JavaScript, it's much easier and jQuery gives you so much more.

By: Bill

Bill — Wed, 30 Nov 2011 19:50:20 +0000

Thanks Denis. I’m not that familiar with Ajax, etc. so I’ll have to do some research. The main thing I’m wondering about is id number for the table rows. I am working with a page that is a repeat region of the first row in the table to auto create the rest of the rows so I’m not sure how to handle that.

By: DenisH

DenisH — Wed, 30 Nov 2011 09:52:32 +0000

Bill, of course you can save the moves to a database, but how you do it is up to you. You could have a form and when the user presses the save button you could interrogate the table to see what the rows are and save the order then. Or you could detect the row drop event and use Ajax to tell the server what the new order is. It depends a lot on what you’re building and what the user will expect to happen.

By: Bill

Bill — Tue, 29 Nov 2011 18:08:21 +0000

Not very useful and no more than a toy if the moves cannot be saved to a database.

By: Педа

Педа — Mon, 22 Aug 2011 08:40:42 +0000

Really good script, Thank you

By: rveach

rveach — Mon, 15 Aug 2011 14:46:50 +0000

I would add the code:
if (ev && ev.preventDefault)
ev.preventDefault();

to the mousedown event. without it, FF4 was selecting the text that was in the table while I was moving a row.

By: José Machado

José Machado — Fri, 15 Jul 2011 17:09:15 +0000

If you want to address rows added dinamycally, just call the function makeDraggable to the row just added:

var tableObj = document.getElementById(‘tableID′);
var tableDnD = new TableDnD();
tableDnD.init( tableObj );

/* create a new row ( rowObj ) and add it dinamycally then call the function below */

tableDnD.makeDraggable(rowObj);

By: nen

nen — Wed, 15 Jun 2011 11:39:45 +0000

The first exapmle doesn’t work for me (in FF4 and IE8) but the second does. What’s the difference?

By: Markus Barnick

Markus Barnick — Wed, 01 Jun 2011 21:00:35 +0000

that isn’t a good tutorial. It is not userfriendly and not to use for beginners and people who are NOT JS-Profies.

It explains something “around” and much “tralala” but not how to use.
There is no full example – no download of an example and the Link in “Puttin in all together” -> “You can download the complete class and other methods from the resources below” -> http://www.isocra.com/#resources links only on a site where nothing is to download.
I think it is nearly useless.
Even you can’t copy it from the sourcecode of this site because there are a hundred of other includes you don’t know which one to use.

there is no hint that you must write something like this:

function start() // Here you must write it as a function that you can call it on onLoad !!!
{
var table = document.getElementById(‘table-1′);
var tableDnD = new TableDnD();
tableDnD.init(table);
}

…

Even there is no information how to adress the new order for saving it into a database