jQuery Sortable - drag and drop multiple items

Question

I have the following code, which allows user to drag and drop from one list to another. Now, how can I allow the user to select and drag & drop multiple items?

S

Answer 1

One way is to create a custom helper with the selected items, hide the items while dragging and manually append the selected items upon receive.

Here's my attempt:

css

.selected {
  background:red !important;
}
.hidden {
  display:none;
}

script:

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

 $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function (e, item) { //create custom helper
        if(!item.hasClass('selected'))
           item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    receive: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
    },
    update: updatePostOrder
});

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

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<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>

JSFiddle Demo