javascript - 使用 jquery UI 从 ul 中的列表中拖动特定部分？

Question

我有一个包含文本和箭头的列表。我想以这样的方式拖动或排序箭头:

1. 它们可以从 1 个列表拖到其他列表。
2. 红色箭头不能出现在绿色箭头之前，即红色箭头总是在绿色上方，如果有人试图在它上面拖动，那应该是不可能的，它只位于红色下方。

This is what i have tried so far:

$("ul.droptrue").sortable({
  connectWith: "ul"
});

.green {
  color: green
}

.red {
  color: red;
}

li,
ul {
  list-style: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>
<ul class="droptrue">
  <li>i am a text 1 <i class="fa fa-arrow-left red"></i> </li>
  <li>i am a text 2 <i class="fa fa-arrow-left green"></i> </li>
  <li>i am a text 3 </li>
  <li>i am a text 4 </li>
  <li>i am a text 5 </li>
  <li>i am a text 6 </li>
</ul>

Problem:

现在整个列表都在拖动，我只想拖动箭头。

提前致谢

快乐编码。

Answer 1

您可以使用 update()事件并比较两个箭头的偏移量，如果条件不匹配则使用 cancel()取消排序的方法。

$(document).ready(function() {
  $("ul.droptrue li").sortable({
    connectWith: "li",
    items: "> i",
    update: function(event, ui) {
      var redArrow = $('.fa.fa-arrow-left.red').offset().top;
      var greenArrow = $('.fa.fa-arrow-left.green').offset().top;
      if (redArrow >= greenArrow) {
        $("ul.droptrue li").sortable("cancel");
        console.log("Red arrow cannot be greater than Green arrow")
      }
    }
  });
})

.green {
  color: green
}

.red {
  color: red;
}

li,
ul {
  list-style: none;
}

ul {
  width: 100px
}

li div {
  display: inline-block
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>
<ul class="droptrue">
  <li>
    <div>i am a text 1</div> <i class="fa fa-arrow-left red pull-right"></i> </li>
  <li>i am a text 2 <i class="fa fa-arrow-left green pull-right"></i> </li>
  <li>i am a text 3 </li>
  <li>i am a text 4 </li>
  <li>i am a text 5 </li>
  <li>i am a text 6 </li>
</ul>

---

编辑: 在 sortable() 中添加了 items: "> i" ( item selector ) 这将指定父元素中的哪个元素元素应该是可排序的。