How to move multiple table rows with jQuery Sortable

Question

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?

Graham · Accepted Answer · 2014-04-14 14:20:52Z

1

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
}

edited Apr 14, 2014 at 14:20

answered Jul 5, 2013 at 9:09

Graham

8,26122 gold badges78 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suraj Shrestha Over a year ago

can you add the hasChanged function.

Collectives™ on Stack Overflow

How to move multiple table rows with jQuery Sortable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related