jQuery MultiSelect Drag

Custom Drag Help

by ashishsingh

HTML

<p>Multi-select Drag</p>
<p>
    <kbd>Click</kbd> to select individual items<br />
    <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

CSS

ul {
    border:1px solid Black;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:top
}
li {
    background-color:Azure;
    border-bottom:1px dotted Gray
}
li.selected {
    background-color:GoldenRod
}

JavaScript

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return $('<li>'+elements.length + ' elements.</li>');//helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});