SORTABLE + DROPPABLE + DROP EVENT BUG WORKAROUND USING SORTABLE RECEIVE EVENT

by bizamajig

HTML

<div class="objectPaletteHolder">
    <ul>
        <li class="draggable ui-state-highlight">Drag me down</li>
        <li class="draggable2 ui-state-highlight">Drag this down, too</li>
        <li class="draggable2 ui-state-highlight">Drag this down, also</li>
        <li class="draggable2 ui-state-highlight">Drag this down, as well</li>
        <li class="draggable2 ui-state-highlight">Drag this down, too</li>
        <li class="draggable2 ui-state-highlight">Drag this down, too</li>
        <li class="draggable2 ui-state-highlight">Drag this down, too</li>
        <li class="draggable2 ui-state-highlight click">Drag this down, click</li>
        <li class="draggable2 ui-state-highlight clicky">Drag this down, clicky</li>
    </ul>
</div>
<div class="editContainer">
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>

CSS

div.editContainer
{
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px solid #000;
}

div.editPreview
{
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px dotted #b4b4b4;
}

.objectPaletteHolder
{
    width: 100%;
}

.objectPaletteHolder ul li
{
    display: inline-block;
}

.editContainer ul li
{
    
}

.editContainer ul
{
    text-align: center;
}

.editContainer ul, .objectPaletteHolder ul
{
    list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;
}

.editContainer li, .objectPaletteHolder li
{
    margin: 5px; padding: 5px; width: 150px;
}

.editContainer ul li, .objectPaletteHolder ul li
{
    cursor: pointer;
}

.editContainer li, .objectPaletteHolder li
{
    cursor: pointer;
}

JavaScript

$(function () {
    $("#sortable").sortable({
        revert: true
    });
    $(".draggable, .draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {      
            alert("receive been triggered.");
        }
    }).droppable({ });

    $("ul, li").disableSelection();
});