Javascript 在指定区域中放置时创建连接的jQuery可排序列表

我想允许用户对文件夹中的文件进行排序，并创建一个新文件夹，在其中他们还可以对文件进行排序

因此，我使用可排序插件表单jqueryui 这是我到目前为止所做的一些工作

问题是：

当文件元素被放置在“新建文件夹”区域时，我创建一个新列表，并将文件元素放置在该列表中 但由于某种原因，它永远不会到达那里。。 我觉得排序插件是如何导致这个问题的，因为它的默认操作是在不允许放置区域的情况下将元素移回其原始位置。。但我不知道该如何克服这一点。。请帮忙

HTML:

<div id="UploadedFilesContainer">
    <div>
         <h4>folder1</h4>

        <ul id="DefaultFolder" class="folder folder-sortable">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </div>
    <hr id="NewFolderZoneSeperator" />

    <div id="NewFolderZone" class="well"> 
        <span id="DragToCreateLabel">Drag here to create a new folder</span>
        <span id="ReleaseToCreateLabel">Release to create a new folder</span>
    </div>
</div>

$(function ()
{
    $(".folder-sortable").sortable({
        connectWith: ".folder-sortable"
    });

    $("#NewFolderZone").droppable({
        hoverClass: "ui-state-hover",
        drop: function (event, ui)
        {
            debugger;
            createNewFolderAndAttachedDroppedFile(ui.draggable);
            event.stopPropagation();
            return false;
        }
    });

});

function createNewFolderAndAttachedDroppedFile(fileElement)
{
    debugger;
    NumOfFoldersCreated++;
    var folderContainer = document.createElement("div");
    var header = document.createElement("h4");
    var fileList = document.createElement("ul");

    folderContainer.appendChild(header);
    folderContainer.appendChild(fileList);

    fileElement.attr("style","");
    fileElement.attr("class", "");
    $(fileList).append(fileElement);

    header.innerHTML = "Folder " + NumOfFoldersCreated;
    fileList.id = "Folder_" + NumOfFoldersCreated;
    fileList.className = "folder folder-sortable"

    $("#NewFolderZoneSeperator").before(folderContainer);

    refreshSortables();
}

function refreshSortables()
{
    $(".folder-sortable:not('.ui-sortable')").sortable({
        connectWith: ".folder-sortable"
    });

    $('.folder-sortable').sortable().bind('sortupdate', function (data)
    {
        //Triggered when the user stopped sorting and the DOM position has changed.
    });
}

---

解决方案是使用“新建文件夹放置区”作为连接列表，并使用

接收

事件触发器创建一个单独的文件夹并将项目移动到该文件夹中

“Receive”事件是在项目已经被放置在新的可排序列表中之后触发的，这就是为什么从现在起我可以自由地将其移动到任何地方

这是小提琴：

var numofolderscreated=1

function refreshSortables()
{
    $(".folder-sortable:not('.ui-sortable')").sortable({
        connectWith: ".folder-sortable",    
    });


}

function createNewFolderAndAttachedDroppedFile(fileElement)
{
    NumOfFoldersCreated++;
    var folderContainer = document.createElement("div");
    var header = document.createElement("h4");
    var fileList = document.createElement("ul");

    folderContainer.appendChild(header);
    folderContainer.appendChild(fileList);

    fileElement.attr("style","");
    fileElement.attr("class", "");
    $(fileList).append(fileElement);

    header.innerHTML = "Folder " + NumOfFoldersCreated;
    fileList.id = "Folder_" + NumOfFoldersCreated;
    fileList.className = "folder folder-sortable"

    $("#NewFolderZoneSeperator").before(folderContainer);

    refreshSortables();
}

$(function ()
{
     $(".folder-sortable").sortable({
        connectWith: ".folder-sortable",   
    });

    $( "#NewFolderZone" ).on( "sortreceive", function( event, ui ){
        //alert("Dropped in a new folder zone");
        debugger;
        createNewFolderAndAttachedDroppedFile(ui.item);
    });

    $("#NewFolderZone").droppable({
        hoverClass: "ui-state-hover",
    });

});

在这方面取得了一些进展：