我有一个包含文字和箭头的列表。我想以这样的方式拖动或排序箭头:
这是我到目前为止所尝试的内容:
$("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>
&#13;
问题:
现在整个列表都在拖动,我只想拖动箭头。
先谢谢
快乐编码。
答案 0 :(得分: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")
}
}
});
})
&#13;
.green {
color: green
}
.red {
color: red;
}
li,
ul {
list-style: none;
}
ul {
width: 100px
}
li div {
display: inline-block
}
&#13;
<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>
&#13;
修改:在items: "> i"
中添加了sortable()
(item selector),这将指定父元素中的哪个元素应该是可排序的。