jQuery在两个li元素之间拖放

Question

我正在开发树视图并使用JQuery Draggable和Droppable插件来实现拖放树节点。

我可以拖动一个文件夹并放下另一个文件夹，然后在“drop”事件处理程序中获取被删除的元素。在我的drop事件处理程序中，我将重新安排我的节点。

HTML代码：

<ul class="dragul">
    <li class="dragli" id="1"><a class="draga">Folder1</a>
        <ul class="dragul">
            <li class="dragli" id="11"><a class="draga">Folder11</a> </li>
        </ul>
    </li>
    <li class="dragli" id="2"><a class="draga">Folder2</a> </li>
    <li class="dragli" id="3"><a class="draga">Folder3</a> </li>
    <li class="dragli" id="4"><a class="draga">Folder4</a> </li>
    <li class="dragli" id="5"><a class="draga">Folder5</a> </li>
</ul>

JS代码：

$( ".draga" ).draggable({
    cursor: "pointer",
    cursorAt: { top: 12, left: 18 },
    helper: function( event ) {
        var temp_name = event.target.innerHTML;
        return $( "<div id='draghelper' class='ui-widget-header drag-helper'>"+temp_name+"</div>" );
    }
});

$( ".draga" ).droppable({
    drop: function( event, ui ) {
        // On dropping on a node will handle here to rearrange the node.
    },
});

现在我还需要拖动一个节点并插入两个节点之间。就像需要拖动“Folder5”并放入“Folder2”和“Folder3”之间。

当拖动的悬停位于节点之间时，我还需要显示一个帮助器，以便在两个节点之间插入。

JSBIN - Link