使用jQuery UI從ul列表中拖出特定部分？

Question

我有一個包含文本和箭頭的列表。我想拖動或排序箭頭的方式：

1. 他們可以從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"（item selector）將指定哪些元素的父元素中應該排序。