Multiselect Drag & Drop

Question

I am working with jquery-ui and the sortable function to reorder a table, which is working fine so far, but what I wanted to achieve now is to multiselect rows and drag / drop that bunch of rows at once.

For now, I select multiple table rows via ctrl+click and give them a class ('selected'). But I'm struggling with the move operation. What I found out so far is, that I have to get all selected rows in the sortable start function and insert those rows somehow in the stop function. But I can't figure out how this should happen.

Any help here is appreciated.

Answer 1

This code allows to order rows with multiselect and mouse click:

<table id="sort" class="grid">
    <thead>
        <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
        <tr><td>Item1</td><td>Item1</td><td>A</td></tr>
        <tr><td>Item2</td><td>Item2</td><td>B</td></tr>
        <tr><td>Item3</td><td>Item3</td><td>C</td></tr>
        <tr><td>Item4</td><td>Item4</td><td>D</td></tr>
        <tr><td>Item5</td><td>Item5</td><td>E</td></tr>
    </tbody>
</table>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#sort tbody").on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
        $.ui.sortable.prototype._rearrange = function (event, i, a, hardRefresh) {
            a ? a[0].appendChild(this.placeholder[0]) : (i.item[0].parentNode) ? i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling)) : i.item[0];
            this.counter = this.counter ? ++this.counter : 1;
            var counter = this.counter;
            this._delay(function () {
                if (counter === this.counter) {
                    this.refreshPositions(!hardRefresh); 
                }
            });
        }
        jQuery('#sort tbody').sortable({
            connectWith: "tbody",
            delay: 150, 
            revert: 0,
            helper: function (e, item) {                               
                var helper = $('<tr/>');
                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 helper.append(elements);
            },
            stop: function (e, info) {
                info.item.after(info.item.data('multidrag')).remove();
             },
        sort: function (e, ui) {
           jQuery("tr").removeClass('selected');
        }
        });
    });

</script>

and also it can works with crtl+click if you start the script with:

$("#sort tbody").on('click', 'tr', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({...............

The fiddle