jQuery UI Sortable linked elements

Question

I have two columns, each with many rows/divs. I'm trying to get jQuery UI Sortable to work in a way that if I drag a div in the left column, the associated row/div in the right column will be sorted as well.

For example,

<html><body>
  <div class='left-column'>
    <div class='field' id='left_1'>content 1</div>
    <div class='field' id='left_2'>content 2</div>
    <div class='field' id='left_3'>content 3</div>
  </div>
  <div class='right-column'>
    <div class='field' id='right_1'>content 1</div>
    <div class='field' id='right_2'>content 2</div>
    <div class='field' id='right_3'>content 3</div>
  </div>
</body></html>

As for the jQuery, right now I have,

function linkedSort() {
  $('.left-column').sortable({ 
    axis: 'y',
    stop: function(event, ui) {
      $('.left-column .field').each(function(i, field) {
        var fieldName = $(field).attr('id');
        var fieldNumber = fieldName.substr(fieldName.indexOf('_')+1);
        // do something here to place it in the right area
      });
    }
  });
};

If I drag .left-column .field_2 below .field_3, the respective divs in .right-column should rearrange themselves as well.

Thanks!

I'm afraid your question, in its current form, only amounts to markup and boilerplate code. Did you try anything at all? Please post code from your (even incomplete or incorrect) attempts to solve this problem; that will help us tune the solution to your specific use case. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 15, 2012 at 19:00
Sorry, first time asking a question on StackOverflow. Also, pretty new to jQuery and Javascript, so please excuse my coding. I was hoping there was a built-in solution by jQuery UI so I didn't think what I've done was important. — Michael Choi
– Michael Choi, Commented Jun 15, 2012 at 20:11

hitmanDX · Accepted Answer · 2012-06-15 19:03:46Z

2

I think this might be what you are looking for:

<div class='left-column'>
    <div name='field_1'>content 1</div>
    <div name='field_2'>content 2</div>
    <div name='field_3'>content 3</div>
  </div>
  <div class='right-column'>
    <div name='field_1'>content 1</div>
    <div name='field_2'>content 2</div>
    <div name='field_3'>content 3</div>
</div>

$('.left-column').sortable({
    axis: 'y',
    stop: function(event, ui) {
        $('.left-column div[name^=field_]').each(function(i, v) {
            $('.right-column').find("[name=" + $(v).attr('name') + "]").appendTo($('.right-column'));
        });
    }
});
$('.right-column').disableSelection();

answered Jun 15, 2012 at 19:03

hitmanDX

2451 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI Sortable linked elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related