Question

使用jQuery-ui api Sortable和Droppable小部件。问题：可排序列表中显示的项目无法在“结束”事件之后直接进行排序，从而导致其泄露。它需要放下助手并再次拖动它，以对显示的内容进行排序。

想要的答案：

主要问题：如何在第一次“结束”事件之后进行排序，同时仍拖动可排序项目？

第二个问题：如何在鼠标滚动（在可排序列表上）或（拖动可排序项目时，与主要问题具有相同的条件）显示隐藏内容？

HTML：

<div class='tmp'>Sortable List
    <ul class="sortableList">
        <li class="hide" style="display: list-item;">Hide</li>
        <li name='A' class="item ui-state-highlight">Drag me down</li>
    </ul>
</div>
<div class="test droppableArea">
</div>

CSS：

.hide {display: none !important}
.item {display: list-item !important}

jquery-ui：

    $(".sortableList").sortable({
    });

    $('.droppableArea').droppable({
        accept: 'li',
        over: function(event, ui) {
              $(this).siblings('.tmp').find('.hide').addClass('item');
        }
    });

Fiddle上的完整代码。

Answer 1

问题再次得到自我解答，在开始研究另一个主题之后，我可能搜索了错误的关键字并找到了答案。

显示项目后，正确答案可以刷新：

$('.droppableArea').droppable({
        accept: 'li',
        over: function(event, ui) {
              $(this).siblings('.tmp').find('.hide').addClass('item');
              $(".sortableList").sortable('refresh'); // <-- ANSWER
        }
    });

完整示例：http://jsfiddle.net/s53bvkye/

在具有“结束”事件的Droppable上拖动可排序项A并显示可排序项之后，在删除A之前先对这些项进行排序

1 个答案: