CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Graham
Graham

Reputation: 8141

How to move multiple table rows with jQuery Sortable

I have a table like this:

<table id="sortable">
  <tr id="d1" class="mainrow"><td class="handle">O</td><td>Item 1</td></tr>
  <tr id="d1b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d2" class="mainrow"><td class="handle">O</td><td>Item 2</td></tr>
  <tr id="d2b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d3" class="mainrow"><td class="handle">O</td><td>Item 3</td></tr>
  <tr id="d3b"><td>&nbsp;</td><td>blah</td></tr>
  <tr id="d4" class="mainrow"><td class="handle">O</td><td>Item 4</td></tr>
  <tr id="d4b"><td>&nbsp;</td><td>blah</td></tr>
</table>

and the following javascript to set up the sortable properties:

$( "#sortable tbody" ).sortable({
  stop: hasChanged,
  handle: '.handle',
  cursor: 'move',
  items: ".mainrow"
});

I want to keep odd and even rows together when I move an odd row (even rows have no handle, so can't be picked up).

My hasChanged function moves the even row after the drop has happened, but the visual effect looks wrong whilst dragging; the gap appears under the odd rows and I would like it to appear under the even rows as that is where it will end up after the hasChanged function is finished with it.

Anyone know how to do this?

Upvotes: 3

Views: 4088

Answers (1)

Graham
Graham

Reputation: 8141

Never mind, figured it out:

$( "#sortable tbody" ).sortable({
  stop: hasChanged,
  over: movePlaceholder,
  handle: '.handle',
  cursor: 'move'
});

I just change the position of the placeholder within my movePlaceholder function:

function movePlaceholder(e, ui)
{
  if (ui.placeholder.prev().attr("id").length == 2)
    ui.placeholder.insertAfter(ui.placeholder.next());
}

As requested, the hasChanged function:

function hasChanged(e, ui)
{
    var newPosition = ui.item.index();
    var id = ui.item.attr("id");

    // whatever you need to do goes here
}

Upvotes: 1

Related Questions