Can we use drag and drop to do row ranking ?

[Waynezhi]

i use pager, math, filter widgets, and edit / append new line
and if i can use sub-rows for a parent row (do the same thing like drag and drop, filtering, edit etc.) ?

thx

[Mottie]

Hi @Waynezhi!

I think it might be difficult to add drag & drop functionality to the table rows because ideally the script would need to use delegated events and I don't know of any existing scripts that do that.

If a script does exist, or if I have time to find & modify one, then after the drag & drop of child rows for a parent row, an "update" method would need to be used to retain the order.

If parent rows were allowed to be drag and dropped, then what would be expected to happen if a column were sorted?

[Mottie]

I stand corrected. It looks like jQuery UI drag & drop does use delegated events. I'll try to work on a demo for you later today.

[Mottie]

Ok here is what I put together (demo):

The only problem is that child rows can be moved from one parent to another... so it is possible to break the parent/child relationship and/or form new relationships (which may be a bad thing)

$(function() {

    var $table = $('.tablesorter');

    // hide child rows & make draggable
    $table.find('.tablesorter-childRow')
        .find('td')
        .droppable({
            drop: function(event, ui) {
                ui.draggable
                    .css({ left : 0, top : 0 })
                    .parent().after( $(this).parent() );
                $table.trigger('update');
            }
        })
        .draggable()
        .hide();

    $table
        .tablesorter({
            theme : 'blue',
            // this is the default setting
            cssChildRow: "tablesorter-childRow"
        })
        .tablesorterPager({
            container: $("#pager"),
            positionFixed: false
        })
        .delegate('.toggle', 'click' ,function(){
            $(this)
                .closest('tr')
                .nextUntil('tr.tablesorter-hasChildRow')
                .find('td').toggle();
            return false;
        });

});

[Mottie]

Yeah, that demo is not pretty... it really breaks the table is a lot of cases. At least we know it's possible to drag & drop though LOL.

[TheSin-]

this is fun in safari, such odd behaviour

[Mottie]

Try this demo... it makes sure that we are only moving child row cells

// hide child rows & make draggable
$table.find('.tablesorter-childRow')
    .find('td')
    .droppable({
        drop: function(event, ui) {
            ui.draggable
                .css({ left : 0, top : 0 })
                .closest('tr.tablesorter-hasChildRow').after( $(this).closest('tr.tablesorter-childRow') );
            $table.trigger('update');
        }
    })
    .draggable()
    .hide();

[Waynezhi]

thx @Mottie, look better

[TheSin-]

in safari it now does not work at all, they just unclip and never snap, at lest before if i got over a row it'd push it down etc etc. Just reporting ;)

[Mottie]

Ok, I think I have most of the bugs worked out (demo). There are some limitations though:

• Only child rows associated with a given parent row may be sorted, so in that demo look for a parent row with more than one child (e.g. SO71777 on page 1)
• When dragging & dropping, only the child row below can be moved up. This is a limitation of the code, otherwise it would get even more complicated.
• Firefox does not show a draggable element because Firefox does not allow the absolute or relative positioning of table cells.

$(function() {

    var $table = $('.tablesorter');

    // hide child rows & make draggable
    $table.find('.tablesorter-childRow')
        .find('td')
        .droppable({
            accept: '.draggingSiblings',
            drop: function(event, ui) {
                if ($(this).closest('tr').length){
                    $(this).closest('tr').before(
                        ui.draggable
                            .css({ left: 0, top: 0 })
                            .parent()
                            .removeClass('draggingRow')
                        );
                    $table
                        .find('.draggingSiblingsRow')
                        .removeClass('draggingSiblingsRow')
                        .find('.draggingSiblings')
                        .removeClass('draggingSiblings');
                    $table.trigger('update');
                } else {
                    return false;
                }
            }
        })
        .draggable({
            revert: "invalid",
            start: function( event, ui ) {
                $(this)
                    .parent()
                    .addClass('draggingRow')
                    .prevUntil('.tablesorter-hasChildRow')
                    .nextUntil('tr:not(.tablesorter-childRow)')
                    .addClass('draggingSiblingsRow')
                    .find('td')
                    .addClass('draggingSiblings');
            }
        })
        .hide();

    $table
        .tablesorter({
            theme : 'blue',
            // this is the default setting
            cssChildRow: "tablesorter-childRow"
        })
        .tablesorterPager({
            container: $("#pager"),
            positionFixed: false
        })
        .delegate('.toggle', 'click' ,function(){
            $(this)
                .closest('tr')
                .nextUntil('tr.tablesorter-hasChildRow')
                .find('td').toggle();
            return false;
        });

});

• Thanks to @TheSin- for helping me test it!

[Waynezhi]

@Mottie its possible to have a demo of drag & drop parent lines ? only zebra widget, without other widgets, just want to save ordering after dropped.

[Mottie]

You could use jQuery UI sortable - see this Stackoverflow question & demo.

[Waynezhi]

thx a lot @Mottie