jquery可排序:在隐藏列表中排序

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>

因此，当我将列表 1 中的项目拖到框 2 上时，我想调用该函数$('#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/