0
여러 개의 테이블 행을 동시에 div에 끌어다 놓을 수 있습니다. 나는 이미 하나의 테이블 행을 가지고 있지만 동시에 2 개 또는 3 개가 아닌이 작업을 수행 할 수 있습니다. 나는 div와 함께 이미 시작과 드래그 이벤트를 파헤 치고 divs 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);
});
}
}
});