可排序的li和可自动排序的div jquery

Question

我想对li进行排序，当li可排序时，带有索引的div也可以自动排序。当我交换item 1和item 2或其他任何东西时，然后在具有类结果的div一侧，将id =“ get-item”的div与li item相同。

这怎么可能。谢谢。

我的代码

$("#sortable1").sortable();

#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

.result {
  color: red;
}

#get-item {
  background: #b0b6b9;
  margin-left: 181px;
  padding: 8px;
  width: 113px;
  margin-top: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<ul id="sortable1" class="">
  <li class="ui-state-default" id='item1'>Item 1</li>
  <li class="ui-state-default" id='item2'>Item 2</li>
  <li class="ui-state-default" id='item3'>Item 3</li>
  <li class="ui-state-default" id='item4'>Item 4</li>
  <li class="ui-state-default" id='item5'>Item 5</li>
</ul>

<div class="result">
  <div id="get-item">1</div>
  <div id="get-item">2</div>
  <div id="get-item">3</div>
  <div id="get-item">4</div>
  <div id="get-item">5</div>
</div>

Answer 1

您可以在stop()内使用$("#sortable1").sortable()事件

$("#sortable1").sortable({
    stop: function(evt, ui) {
       //Put your logic here...
    }
});

此后，您可以在li事件中获取所有stop标签，然后对其进行循环并在result div中设置值

注意，您的组件ID应该是唯一的，而不应该是通用的。不用使用 id 来应用CSS，而是使用class属性。

演示

$(function() {
  $("#sortable1").sortable({
    stop: function(evt, ui) {
      let resultDiv = $('div.get-item');
      $.each($(this).find('li'), function(i, el) {
        $(resultDiv[i]).text($(el).attr('value'));
      });
    }
  });
});

#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

.result {
  color: red;
}

.get-item {
  background: #b0b6b9;
  margin-left: 181px;
  padding: 8px;
  width: 113px;
  margin-top: 4px;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<ul id="sortable1" class="">
  <li class="ui-state-default" id='item1' value=1 >Item 1</li>
  <li class="ui-state-default" id='item2' value=2>Item 2</li>
  <li class="ui-state-default" id='item3' value=3>Item 3</li>
  <li class="ui-state-default" id='item4' value=4>Item 4</li>
  <li class="ui-state-default" id='item5' value=5>Item 5</li>
</ul>

<div class="result">
  <div class="get-item">1</div>
  <div class="get-item">2</div>
  <div class="get-item">3</div>
  <div class="get-item">4</div>
  <div class="get-item">5</div>
</div>

---

使用insertBefore和insertAfter进行演示

您还可以使用insertBefore和insertAfter

function insertAt(parent, element, index, dir) {
    var el = parent.children().eq(index);

    element[dir == 'top' ? 'insertBefore' : 'insertAfter'](el);
}

$(function() {
    $("#sortable1").sortable({
        stop: function(evt, ui) {
            let parent = $('.result'),
                el = parent.find('.' + ui.item.attr('id')),
                dir = 'top';

            if (ui.offset.top > ui.originalPosition.top) {
                dir = 'bottom';
            }
            insertAt(parent, el, ui.item.index(), dir);
        }
    });
});

#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  cursor: pointer;
}

.result {
  color: #FFF;
  font-weight: bold;
  text-align: center;
}

.get-item {
  margin-left: 181px;
  padding: 8px;
  width: 113px;
  margin-top: 4px;
}

.item1 {
  background: red;
}

.item2 {
  background: pink;
}

.item3 {
  background: brown;
}

.item4 {
  background: orange;
}

.item5 {
  background: #5c5c5c;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<ul id="sortable1" class="">
  <li class="ui-state-default" id='item1'>Item 1</li>
  <li class="ui-state-default" id='item2'>Item 2</li>
  <li class="ui-state-default" id='item3'>Item 3</li>
  <li class="ui-state-default" id='item4'>Item 4</li>
  <li class="ui-state-default" id='item5'>Item 5</li>
</ul>

<div class="result">
  <div class="get-item item1">1</div>
  <div class="get-item item2">2</div>
  <div class="get-item item3">3</div>
  <div class="get-item item4">4</div>
  <div class="get-item item5">5</div>
</div>