Reorder table rows

Feb 16, 2013 at 6:34 PM
Hello

Thanks for a nice plugin.

I am having problems reordering table rows. Everything works OK if I target the table without any extra parameters, like so:

$("#mytableid").dragsort({ dragBetween: true });

However in my table the first row is the header and I want to exclude it, so I try:

$("#mytableid").dragsort({ dragBetween: true, itemSelector: "tr:gt(0)" });

But that doesn't work because the check on row number 117 is returning true:

$(e.target).closest(opts.itemSelector).size() == 0)

After this I modified my table somewhat - I added thead, tbody and tfoot elements there and targeted tbody:

$("#mytableid tbody").dragsort({ dragBetween: true });

This works, but then I want to specify the cell used in dragging the rows:

$("#mytableid tbody").dragsort({ dragBetween: true, dragSelector: "td:eq(0)" });

And again reordering doesnt work anymore. This time I believe it's failing on this row:

if (dragHandle == this) return;

So - any examples on how to reorder table rows while excluding the first row and specifying the dragSelector-cell?
Coordinator
Feb 19, 2013 at 7:44 AM
Edited Feb 19, 2013 at 7:46 AM
$(e.target).closest(opts.itemSelector).size() == 0)
I can't find this in the dragsort code, what version are you using?
var dragHandle = e.target;
while (!$(dragHandle).is(opts.dragSelector)) {
    if (dragHandle == this) return;
    dragHandle = dragHandle.parentNode;
}
The idea behind this code is that the element you clicked i.e. "e.target" could be inside the element acting as the drag handle e.g. you clicked a div inside a table cell. So I keep going up the tree until it matches the dragSelector. The variable "this" is the list container in this case "tbody" so if we go up that far it means no dragHandle was found and should mean we didn't click on it so return from the method. So what's failing is $(td).is("td:eq(0)") in the while condition. My suggestion would be to do this:
$("#mytableid td:eq(0)").addClass("dragHandle");
$("#mytableid tbody").dragsort({ dragBetween: true, dragSelector: ".dragHandle" }); 
Then it will be $(td).is(".dragHandle") in the while condition and that should definitely match the first table cell.
Feb 19, 2013 at 8:09 AM
Thank you for the reply.

I am using jquery.dragsort-0.5.1.js from the download page. It seems there are some discrepancy in the versioning, because the source code on the "SOURCE CODE"-tab looks a lot different.

Where can I get the newest version? Do you recommend getting the code from the "SOURCE CODE"-tab?
Feb 19, 2013 at 2:46 PM
I got the code from the "SOURCE CODE" tab and it's working great.

One small problem still exists though.

My table is inside a div which has overflow: auto. The table is higher than the available height, so there's a scrollbar to scroll the div up and down. The placement of the row being dragged is displaced if the div has been scrolled down. I can probably modify the code to take the parents scrollHeight into consideration, but just so you know in case you want to fix it.
Feb 20, 2013 at 10:47 AM
I've looked at the code and modifying it doesn't seem to be so easy as I wold have hoped.

Here is more or less what I have:
$("#dragsort tbody").dragsort({ dragBetween: true });

<div style='position: absolute; left: 100px; top: 100px; right: 100px; bottom: 100px; overflow: auto' id='container'>
<table id='dragsort'>
<thead>
<tr><th>...</th></tr>
</thead>
<tbody>
<tr><td>Enough rows to make the table higher than the container</td></tr>
<tr><td>Enough rows to make the table higher than the container</td></tr>
<tr><td>Enough rows to make the table higher than the container</td></tr>
</tbody>
</table>
</div>
Reordering only works properly when the container div is scrolled all the way up. If it has been scrolled 100px down, then the element being dragged is offset up by 100px.

I also tried this:
$("#dragsort tbody").dragsort({ dragBetween: true, scrollContainer: "#container" });
But scrollContainer doesn't seem to be doing anything or maybe I just don't understand how to use it properly.