多选拖放

Question

现在，我通过ctrl+click选择多个表行，并给它们一个类('selected')。但我正在为搬家行动而苦苦挣扎。到目前为止，我发现，我必须在可排序的start函数中获得所有选定的行，并以某种方式将这些行插入到stop函数中。但我想不出这是怎么回事。

感谢您在这里提供的任何帮助。

Answer 1

此代码允许通过多选和鼠标单击对行进行排序：

<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>

而且，如果您使用以下命令启动脚本，它也可以与crtl+click一起使用：

$("#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