Question

我正在使用jquery-ui和sortable函数重新排序一个表，到目前为止工作正常，但我现在想要实现的是多次选择行并一次拖放那一行。

现在，我通过ctrl +点击选择多个表格行并给他们一个班级（＆＃39;选择＆＃39;）。但我正在努力进行移动操作。到目前为止我发现的是，我必须在可排序的启动函数中获取所有选定的行，并以某种方式在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

Multiselect Drag＆amp;下降

1 个答案: