Jquery UI Sortable ie7 issue when dropping row outside of sortable table

Question

On ie8, everything is working fine with my sortable lists. However, I'm having issues on ie7.

My page is set up with a table for each employee. There is a list of jobs which need to be assigned, and I drag and drop these job rows into the employee tables.

At first, I was suffering the problem whereby I couldn't drop into an already empty employee table, but I got around this issue by using a combination of a .dontinclude row in each table, and adding a receive function (see below):

jQuery_1_9_1(function() {
            jQuery_1_9_1('[id$="' + tname + '"] ').sortable({
                items: "tr:not(.dontinclude)",
                connectWith: ".connectedSortable ",
                receive:  function(ev, ui) {
                    //debugger;
                    ui.item.parent().find('tbody').append(ui.item);
                }
            }).disableSelection();
        });

I add the .dontinclude row as I create the tables (they're built dynamically rather than declared), meaning it is the first row on there. Prior to adding

:not(.dontinclude)

the rows would not add to an empty table. After adding that line, they would add to the table, but they would be added after the tbody tag, which was no use. Adding the receive function specified where to add after receiving, meaning elements now appeared within the tbody.

SO, everything was working fine in ie8, until I found out that some users would be on ie7. Everything was going fine, until I accidentally let go of a row mid drag and drop, but not over one of my sortable tables. The result was that it completely disappeared. I checked the DOM page, and the rows were once again adding outside of the tbody (presumably causing them to disappear on ie7). If I put a debugger inside the receive function I find that function is not called in this instance - it is only called when I am over a sortable table.

So I think I need to find the behaviour that is called when an item is dropped outside of a sortable area, and perhaps override it.

Is this possible? Maybe something to do with jquery droppable?

Answer 1

OK, I got to the bottom of this one.

It looks like I over-complicated things initially.

There was no need for using the receive function.

jQuery_1_9_1(function() {
            jQuery_1_9_1('[id$="' + tname + '"] tbody ').sortable({
                items: "tr:not(.dontinclude)",
                connectWith: ".connectedSortable tbody"
            }).disableSelection();
        });

I just needed to specify the tbody in the selector and the connectWith. This, in additon to having the .dontinclude row (in my table, this is just the table header row) seems to resolve the issue, and ensure values are still added within the tbody tag.

EDIT I should also add, my 'tname' id and class 'sortable' are specified on the table tag.