Question

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

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 draggable进行此过程。

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

grouping draggable objects with jquery-ui draggable

拖放多个表行

1 个答案: