Ahmad Budi U
Ahmad Budi U

Reputation: 121

jQuery UI Sortable Multiple element target

I have 2 list element

<div id="list-one">
  <ul class="ul-one">
    <li data-order="1">item 1</li>
    <li data-order="2">item 2</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="ul-two">
    <li data-order="1">item 4</li>
    <li data-order="2">item 5</li>
    <li data-order="3">item 6</li>
  </ul>
</div>

Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?

I want get the result like

<div id="list-one">
  <ul class="ul-one">
    <li data-order="2">item 2</li>
    <li data-order="1">item 1</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="ul-two">
    <li data-order="2">item 5</li>
    <li data-order="1">item 4</li>
    <li data-order="3">item 6</li>
  </ul>
</div>

just drag ul-one element

Thanks for the answer

Upvotes: 0

Views: 195

Answers (2)

Luong.Khuc
Luong.Khuc

Reputation: 26

Sorry for misunderstand the question.

This is a working solution. I added id tag to easy call

http://jsfiddle.net/39ZvN/1141/

Upvotes: 1

Prasanth Ravi
Prasanth Ravi

Reputation: 189

Try this

<div id="list-one">
  <ul class="sort ul-one">
    <li data-order="1">item 1</li>
    <li data-order="2">item 2</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="sort ul-two">
    <li data-order="1">item 4</li>
    <li data-order="2">item 5</li>
    <li data-order="3">item 6</li>
  </ul>
</div>


$( '.sort li' ).each(function() {
      var position = $(this).data('order');
      $(this).siblings().eq(position+1).after(this);
});

Upvotes: 0

Related Questions