拖放多个表格行

Question

我试图能够同时将多个表格行拖放到一个 div 中。我已经能够用一个表格行来做到这一点，但不能同时用 2 个或 3 个。我发现代码已经使用 div 而不是表格行来执行此操作，我挖掘了 start 和 drag 事件，并注意到 div css offsettop 和 offsetleft 在 div 的每次移动时都会发生变化，并且它会在移动时重写其偏移量。我为表格行合并了该代码，但是当我拖动表格行并且没有看到表格行偏移量在每次移动时发生变化时出现问题，例如 div 偏移量正在改变。感谢以下代码：

var posTopArray = [];
var posLeftArray = [];
var begintop;
var beginleft;
var table = $('#table1');
var currentTime = new Date();
table.find('tr td.name').bind('mousedown', function () {
    table.disableSelection();
}).bind('mouseup', function () {
    table.enableSelection();
}).draggable({
    helper: function (event) {
        return $('<div class="drag-cart-item"><table id="table1"></table></div>').find('table').append($(event.target).closest('tr').clone()).end().insertAfter(table);
    },
    cursorAt: {
        left: -5,
        bottom: 5
    },
    cursor: 'move',
    distance: 10,
    delay: 100,
    scope: 'cart-item',
    revert: 'invalid',
    start: function (event, ui) {
        if ($(this).closest("tr").hasClass('grouped')) {
            $(".grouped").each(function (i) {
                thiscsstop = $(this).attr('offsetTop');
                if (thiscsstop == 'auto') thiscsstop = 0; // For IE
                thiscssleft = $(this).attr('offsetLeft');
                if (thiscssleft == 'auto') thiscssleft = 0; // For IE
                posTopArray[i] = parseInt(thiscsstop);
                posLeftArray[i] = parseInt(thiscssleft);
            });
        }
        begintop = $(this).attr('offsetTop'); // Dragged element top position
        beginleft = $(this).attr('offsetLeft'); // Dragged element left position
    },
    drag: function (event, ui) {
        var offsettop = $(this).attr('offsetTop');
        var offsetleft = $(this).attr('offsetLeft');
        var topdiff = offsettop - begintop; // Current distance dragged element has traveled vertically
        var leftdiff = offsetleft - beginleft; // Current distance dragged element has traveled horizontally
        var topdiff = $(this).attr('offsetTop') - begintop;
        var leftdiff = $(this).attr('offsetLeft') - beginleft;

        if ($(this).closest("tr").hasClass('grouped')) {
            $(".grouped").each(function (i) {

                $(this).css('top', posTopArray[i] + topdiff);
                $(this).css('left', posLeftArray[i] + leftdiff);
            });
        }
    }
});

Answer 1

在这个过程中使用 jquery ui 可拖动。

对于组拖动，请参阅此解决方案

grouping draggable objects with jquery-ui draggable