CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
Jason
Jason

Reputation: 1104

jQuery UI Sortable - connectWith difficulties when connected item is empty

I have several sortable tables on a page. Most of them are connected but one is only able to be dragged out of, but not to. I can't seem to drag items into one of these tables that is empty.

Here is a jsFiddle: http://jsfiddle.net/jasonbutz/ZLzU3/2/

EDIT:

Also, having a hidden <tr> doesn't seem to help anything.

Upvotes: 3

Views: 4903

Answers (3)

Adauto
Adauto

Reputation: 569

I'm a little late to the party but in my case I didn't have table headers and that was an issue for me. Also, I've implemented that in two ways. Here is how I did it and worked for me:

https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Upvotes: 0

rhinoplusfacile
rhinoplusfacile

Reputation: 46

Xnake's answer solves a problem (and thanks so much to him for that) but creates one of its own: if you move items between two tables that both have contents, the item you move will always wind up at the bottom of the table into which you added it. If that's the behavior you're looking for, that's fine, but if not, you need to replace his receive handler:

function(e, ui) 
{
  $(this).find("tbody").append(ui.item);
}

with:

function(e, ui) 
{
  var collection = $(this).find("tbody tr");
  if(collection.length < 1)
  {
    $(this).find("tbody").append(inserted);
  }
  else
  {
    $(ui.placeholder).replaceWith(inserted);
  }
}

which preserves his bug-killing behavior for an empty table but preserves the widget's default behavior when the table has items.

There may be a better way to do this; I've been unable to find any satisfactory way to call the default functionality within the override, which would be the ideal.

Upvotes: 0

Xnake
Xnake

Reputation: 940

Jquery UI sortable seems to have trouble when using sortable table's body with connected list/table. The other way to achieve that is you set the table itself as the container for the sortable and set which items are sortable, in this case we only want the tr in the tbody and not in the thead. Here's the working example: http://jsfiddle.net/ZLzU3/62/

Upvotes: 7

Related Questions