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

Question

我想对 li 进行排序，当 li 可排序时，然后自动将带有索引的 div 也可排序。当我交换 item 1 和 item 2 或任何其他内容时，然后在带有类结果的 div 端，移动带有 id="get-item"的 div 与 li 元素相同。

这怎么可能。谢谢。

我的代码

$("#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 中设置值格

注意您的组件 ID 应该是唯一的，不应该是通用的。使用 class 而不是使用 id 应用 css属性(property)。

演示

$(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>