Drag multiple items

by alano

HTML

<div id="main">
    <p>Drag one or more of these boxes...</p>
    <ul id="drag">
        <li data-id="1" data-group="0">One[0]</li>
        <li data-id="2" data-group="0">Two[0]</li>
        <li data-id="3" data-group="0">Three[0]</li>
        <li data-id="4" data-group="1">Four[1]</li>
        <li data-id="5" data-group="1">Five[1]</li>
        <li data-id="6" data-group="1">Six[1]</li>
    </ul>
    <ul id="drop"><span>drop here</span></div>
</ul>

CSS

#drag { padding: 50px; }
li {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
    cursor:pointer;
    border: 2px solid Black;
    text-align: center;
    line-height: 50px;
}
#drop {
    width: 100px;
    height: 100px;
    border: 5px dashed Gray;
    margin-left:200px;
    text-align:center;
}
#drop span, #drop li {
    color: Gray;
}

JavaScript

$(document).ready(function(){
    $("#drag li").draggable({
        helper: function() {
            $('<div>').text($(this).text()).addClass('draggingOption');
            return $(this).siblings("[data-group=" + $(this).data("group") + "]").andSelf();
        },
        appendTo: "body"
    });
    $("#drop").droppable({
        drop: function (ev, ui) {
            var $drop =  $(this);
            $(ui.draggable).each(function() {
                $('<li>').text($(this).data("id")).appendTo($drop);
            });
        }
    });
});