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/

jquery sortable：在隐藏列表中排序

1 个答案: