Create a connected jQuery Sortable list on drop in a designated zone

Question

I want to allow users to sort files in a folder and to create a new folder in which they could also sort files.

so i am using the Sortable plugin form jQuery UI here is a fiddle of what i have so far

the problem is:

when the file element is dropped on the "New Folder" zone I create a new list and place the file element in that list but for some reason it never gets there .. I feel that some how the Sortable plugin causing this problem becuse its default action is to move the element back to its origin if the drop zone is not allowed .. but i have no clue on how to over come this .. please help ..

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>

JS:

$(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.
    });
}

Answer 1

the solution was to use the "new folder drop zone" as the connected list and the Receive event trigger to create a separate folder and move the item there ..

the "Receive" event is trigger after the item was already place in the new sortable list that is why from this point i could freely move it anywhere ...

here is the fiddle: http://jsfiddle.net/L9knb5n6/21/

var NumOfFoldersCreated = 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",
    });

});