jquery sortable：在隱藏列表中排序

Question

我有3個可排序列表，互相連接。在文檔準備就緒後，只顯示第一個文檔。其他人是隱藏的。我需要創建一個函數，當第一個列表中的某個項目被拖動到包含相關列表的div上時，它將顯示隱藏列表。

<div id="box1"> BOX 1 
    <ol id="list1"> 
     <li class="items">item A</li> 
     <li class="items">item B</li> 
     <li class="items">item C</li> 
    </ol> 
</div> 
<div id="box2"> BOX 2 
    <ol id="list2"> 
     <li class="items">item D</li> 
     <li class="items">item E</li> 
     <li class="items">item F</li> 
    </ol> 
</div> 
<div id="box3"> BOX 3 
    <ol id="list3"> 
     <li class="items">item G</li> 
     <li class="items">item H</li> 
     <li class="items">item I</li> 
    </ol> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#list2, #list3").hide(); 
     $("#list1, #list2, #list3").sortable({ 
      connectWith: "#list1, #list2, #list3" 
     }); 
    })  
</script> 

所以，當我在盒2拖動列表1的項目，我想調用函數$('#list2').show()

Answer 1

添加draggable="true"爲所有<li>元素的屬性。 然後更改腳本：

$(document).ready(function(){ 
    $("#list2, #list3").hide(); 
    $("#box2").on("dragenter", function() { 
    $("#list2").show(); 
    }); 
    $("#box3").on("dragenter", function() { 
    $("#list3").show(); 
    }); 
}) 

您會在這裏找到更多的信息：https://www.html5rocks.com/en/tutorials/dnd/basics/