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/