Im trying to be able to drag and drop multiple table rows into a div at the same time. I am already able to do this with one table row but not 2 or 3 at the same time. I found code that does this already with divs instead of table rows I dug into the start and drag events and noticed that the divs css offsettop and offsetleft changes on each movement of the divs and it rewrites its offset on movement. I incorporated that code for table rows but I had an issue when I am dragging the table rows and not seeing the table rows offset change on each movement like the divs offset are changing. Thanks Code Below:
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);
});
}
}
});
