在使用 'over' 事件显示可排序项目的情况下将可排序项目 A 拖到 Droppable 上后，这些项目在放下 A 之前无法排序

Question

使用 jQuery-ui api 可排序和可放置的小部件。问题：可排序列表中显示的项目在 'over' 事件后不能直接排序，这导致了它的显示。它需要放下助手并再次拖动它以允许对显示的内容进行排序。

想要的答案：

主要问题：如何允许在第一个 'over' 事件之后进行排序，同时仍然拖动可排序的项目？

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

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

又是一个问题self-answered，我可能是搜索了错误的关键词才找到答案，然后才开始研究另一个话题。

正确答案是显示项目后刷新排序：

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

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

在使用 'over' 事件显示可排序项目的情况下将可排序项目 A 拖到 Droppable 上后，这些项目在放下 A 之前无法排序

After dragging Sortable item A on Droppable with 'over' event revealing sortable items, those items canot be sorted before droping A

jquery

jquery-ui