jQuery multiple draggable and sortable

SO 17907203/

by Petr Haluza

HTML

<ul id="answers">
    <li>Item 1 (+)</li>
    <li>Item 2 (+)</li>
    <li>Item 3 (+)</li>
    <li>Item 4 (+)</li>
</ul>
<ul class="container"></ul>
<ul class="container"></ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
li {
    margin: 5px;
    padding: 5px;
    width: 150px;
    border: 1px solid #999;
    cursor: pointer;
}
#answers {
    position: relative;
    float: left;
    width: 170px;
    border: 1px solid red;
    margin-right: 20px;
}
.container {
    position: relative;
    float: left;
    width: 170px;
    border: 1px solid blue;
    margin-right: 10px;
    min-height: 40px;
}

JavaScript

$(function () {

    $("#answers li").draggable({
        connectToSortable: '.container',
        helper: 'clone',
        revertDuration: 0
    });

    $(".container").sortable({
        connectWith: '.container',
        revert: true
    });

    $(".container li").draggable({
        connectToSortable: '.container',
        revert: "invalid",
    });


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

});