Drag an drop into a sortable

A working example of how you can drag any draggable on to a sortable list, without having drop events fired by the sorting of the destination list.

by Dug Sohn

HTML

<h1>Drag an drop into a sortable</h1>
<p>A working example of how you can drag any draggable on to a sortable list, without having drop events fired by the sorting of the destination list.</p>
<p>My motivation for this was to have a list of items that was not sortable, while being able to drag from them into the sortable area. Once the item has been dropped the sortable takes over and the user can arrange the items as they see fit.</p>
<p>Ultimately it would be nice to have it sortable as the user was dropping the item onto the sortable element.</p>

<h2>This list is sortable, and droppable</h2>
<ul id="list-one" class="linked">
    <li><img src="http://placehold.it/80x80/eee/&text=img1"></li>
    <li><img src="http://placehold.it/80x80/efe/&text=img2"></li>
    <li><img src="http://placehold.it/80x80/fee/&text=img3"></li>
    <li><img src="http://placehold.it/80x80/eef/&text=img4"></li>
</ul>
<div style="clear:both"></div>

CSS

h1 {
    font-size:1.4em;
}
h2 {
    font-size:1.2em;
}
p {
    margin: 10px;
}
ul {
    width: 400px;
    float:left;
    -moz-transition: background-color ease .5s;
    -webkit-transition: background-color ease .5s;
}

ul li {
    float: left;
    width: 80px;
    padding: 10px;
}

li {
    text-decoration: none;
    list-style: none;
}

.ui-state-highlight {
    background-color: #227945 !important;
}

#list-one {
    background-color: #998800;
}

#list-two {
    background-color: #eee;
}
#list-two li img {
    opacity: 0.7;
}

JavaScript

$(function() {
    var listOne = $('#list-one');

    listOne.sortable({
        revert: true,
        beforeStop: function(event, ui) {
            $(this).data("lastItem", ui.item);
        },
        receive: function(event, ui) {
            $(this).data("lastItem" ).find('img').css('opacity','1');
            ui.item.draggable('destroy').css('opacity', '0.2');
        }
    });
    $("ul, li, img").disableSelection();
});