перетащите несколько строк таблицы - PullRequest
0 голосов
/ 07 января 2012

Я пытаюсь перетаскивать несколько строк таблицы в div одновременно. Я уже могу сделать это с одной строкой таблицы, но не 2 или 3 одновременно. Я нашел код, который делает это уже с div вместо строк таблицы, которые я копал в событиях start и drag, и заметил, что 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);
            });
        }
    }
});

1 Ответ

0 голосов
/ 07 января 2012

Используйте jquery ui draggable для этого процесса.

и для группового перетаскивания см. Это решение

группирование перетаскиваемых объектов с jquery-ui draggable

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...