Table drag 'n drop re-ordering

[Mike Rockett]

Greetings

I'm busy working on my first module (finally). Part of the module entails rendering the usual MarkupAdminDataTable on the module's admin page.

Because of the nature of the module, I'd like to be able to re-order items in the table, by means of drag 'n drop, and perhaps save that order as an order field in the DB table for each item.

Can't seem to find anyone who's done this before... Can anyone point me in the right direction?

[adrian]

Hi Mike,

Off the top of my head:

http://modules.processwire.com/modules/batch-child-editor/

And the 2.5 core PageTable fieldtype.

$table = $this->modules->get('MarkupAdminDataTable');
$table->setSortable(true);

function TableSortable($table) {
    if(!$table.is("tbody")) $table = $table.find("tbody");
    $table.sortable({
        axis: 'y',
        handle: '.InputfieldChildTableRowSortHandle'
    });
}

[Mike Rockett]

Thanks Adrian, works just the way I wanted. Though, it seems to resize the row once it's been picked up - makes it thinner. When you put it back, it goes back to normal...

Edit: Also, what event do I listen for in order to show a button (say, "Save New Order") when it is changed? (That is, not when the row is picked up, but when it's put down in a different place.)

Update (row width): 

I've managed to get it mostly right with this:

table tbody tr>td:first-child {
    width: 1%;
}
table tbody tr>td:nth-child(2) {
    width: 26%;
}
table tbody tr>td:nth-child(3) {
    width: 35%;
}
table tbody tr>td:nth-child(4) {
    width: 35%;
}
table tbody tr>td:last-child {
    width: 3%;
}

Edited September 22, 2014 by Mike Anthony

[adrian]

Glad it worked for you and that you sorted out the row width stuff.

I haven't played with sortable callbacks for a while, but I think this is what you are looking for:

http://api.jqueryui.com/sortable/#event-update

[Mike Rockett]

Ah, right! Completely didn't even realise this whole setup is built on jQuery UI. (Still new to the PW game, so haven't explored everything as yet.)

Module should be coming out in a week or so (beta). Can't confirm that, though, because I honestly don't know which way is up these days.