Переместить два сортируемых объекта в другом списке в одну и ту же позицию по классу - PullRequest
Новая
       33

Переместить два сортируемых объекта в другом списке в одну и ту же позицию по классу

8 голосов
/ 06 мая 2019

У меня есть два списка сортируемых объектов 

1         1 (1A 1B)
2 (2A 2B) 2 
3         3 (3A 3B)
4 (4A 4B) 4
5         5 (5A 5B)

Код для списков выглядит следующим образом: 

$( function() {
    $( ".contain" ).sortable();
 });
.contain{
   list-style: none;
}

#right{
   float: left;
}

#left{
   float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
     <div>
      <ul id="left" class="contain">
       <li class="1">1</li>
       <li class="2">2</li>
       <ul>
           <li>2A</li>
           <li>2B</li>
       </ul>
       <li class="3">3</li>
       <li class="4">4</li>
          <ul>
           <li>4A</li>
           <li>4B</li>
          </ul>
       <li class="5">5</li>
      </ul>
     </div>

     <div>
      <ul id="right" class="contain">
       <li class="1">1</li>
          <ul>
           <li>1A</li>
           <li>1B</li>
          </ul>
       <li class="2">2</li>
       <li class="3">3</li>
          <ul>
           <li>3A</li>
           <li>3B</li>
          </ul>
       <li class="4">4</li>
       <li class="5">5</li>
          <ul>
           <li>5A</li>
           <li>5B</li>
          </ul>
      </ul>
     </div>
    </div>

Я бы хотел отсортировать одинаковые числа вместе.Например, если бы я взял 5 в списке «влево» и переместил его в верхнюю часть, то 5 в списке «вправо» также должен переместиться в верхнюю часть, и обратное также верно, если бы я взял3 из списка «вправо» и переместите его наверх, тогда 3 в списке «слева» сделают то же самое.

1 Ответ

4 голосов
/ 15 мая 2019

используйте это js в своем коде и попробуйте этот ответ 

$(".contain").sortable({
    start:function(event, ui){
        pre = ui.item.index();
    },
    stop: function(event, ui) {
        lst = $(this).attr('id');
        post = ui.item.index();
        other = (lst == 'left') ? 'right' : 'left';
        if (post > pre) {
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertAfter('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }else{
            $('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertBefore('#'+other+ ' li.li_parent:eq(' +post+ ')');
        }
    }
});

Ваш ul должен быть в li, например: - <li>1<ul><li>a</li></ul></li> и назначить имя класса li_parent для подвижного li.

$(function() {
    var lst, pre;

    $(".contain").sortable({
        start: function(event, ui) {
            pre = ui.item.index();
        },
        stop: function(event, ui) {
            lst = $(this).attr('id');
            post = ui.item.index();
            other = (lst == 'left') ? 'right' : 'left';
            if (post > pre) {
                $('#' + other + ' li.li_parent:eq(' + pre + ')').insertAfter('#' + other + ' li.li_parent:eq(' + post + ')');
            } else {
                $('#' + other + ' li.li_parent:eq(' + pre + ')').insertBefore('#' + other + ' li.li_parent:eq(' + post + ')');
            }
        }
    });

});
.contain{
   list-style: none;
}

#right{
   float: left;
}

#left{
   float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
     <div>
      <ul id="left" class="contain">
       <li class="1 li_parent">1</li>
       <li class="2 li_parent">2
       <ul>
           <li>2A</li>
           <li>2B</li>
       </ul>
       </li>
       
       <li class="3 li_parent">3</li>
       <li class="4 li_parent">4
         <ul>
           <li>4A</li>
           <li>4B</li>
          </ul>
       </li>
         
       <li class="5 li_parent">5</li>
      </ul>
     </div>

     <div>
      <ul id="right" class="contain">
       <li class="1 li_parent">1
       <ul>
           <li>1A</li>
           <li>1B</li>
          </ul>
       </li>
          
       <li class="2 li_parent">2</li>
       <li class="3 li_parent">3
        <ul>
           <li>3A</li>
           <li>3B</li>
          </ul>
       </li>
         
       <li class="4 li_parent">4</li>
       <li class="5 li_parent">5
       <ul>
           <li>5A</li>
           <li>5B</li>
          </ul>
       </li>
          
      </ul>
     </div>
    </div>
...