Multi Select drag and drop

by Ea Bangalore

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css">
<div id="maincontainer">
    <div id="navtoplistline">&nbsp;</div>
    <div id="contentwrapper">
        <div id="maincolumn">
            <div class="text">
                <hr />
                <div class="listBlock">
                     <h2>Available</h2>

                    <ul id="sortable1" class='droptrue'>
                        <li id="article_1">Article #1</li>
                        <li id="article_2">Article #2</li>
                        <li id="article_3">Article #3</li>
                    </ul>
                </div>
                <div class="listBlock">
                     <h2>My Articles</h2>

                    <ul id="sortable2" class='droptrue'></ul>
                </div>
                <br clear="both" />
                <p>Which articles, in which order?:
                    <br />
                    <input type="text" id="postOrder" name="postOrder" value="" size="30" />
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.listBlock {
    float: left;
}
#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 100px;
    background: #eee;
    padding: 5px;
    width: 300px;
    border: 1px solid black;
}
#sortable1 li, #sortable2 li {
    color:black;
    cursor: move;
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 250px;
    background: none;
    background-color: white;
}
.selected {
    background:red !important;
}
.hidden {
    display:none !important;
}
ul {
    list-style-type: none;
}

JavaScript

$(function () {
    $('.droptrue').on('click', 'li', function () {
        $(this).toggleClass('selected');
    });

    $("ul.droptrue").sortable({
        connectWith: 'ul.droptrue',
        opacity: 0.6,
        revert: true,
        helper: function (e, item) {
            console.log('parent-helper');
            console.log(item);
            if(!item.hasClass('selected'))
               item.addClass('selected');
            var elements = $('.selected').not('.ui-sortable-placeholder').clone();
            var helper = $('<ul/>');
            item.siblings('.selected').addClass('hidden');
            return helper.append(elements);
        },
        start: function (e, ui) {
            var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
            ui.item.data('items', elements);
        },
        receive: function (e, ui) {
            ui.item.before(ui.item.data('items'));
        },
        stop: function (e, ui) {
            ui.item.siblings('.selected').removeClass('hidden');
            $('.selected').removeClass('selected');
        },
        update: updatePostOrder
    });

    $("#sortable1, #sortable2").disableSelection();
    $("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");
    updatePostOrder();
});

function updatePostOrder() {
    var arr = [];
    $("#sortable2 li").each(function () {
        arr.push($(this).attr('id'));
    });
    $('#postOrder').val(arr.join(','));
}