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

Question

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

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

这是我到目前为止尝试过的：

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

问题：

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

提前致谢

快乐编码。

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"(项目选择器(，这将指定父元素内的哪个元素应该是可排序的。