I have an igGrid from Infragistics using IgniteUI version 16.2.
I'm trying to make the rows draggable using the "draggable" library from jQuery UI version 1.11.4 (combined with jQuery version 1.11.3).
My "droppable" target is a div outside of the igGrid.
I'm able to drag and drop the rows just fine as long as I stay within the grid. However, as soon as I try to drag the row outside of the grid, the grid starts to scroll.
Here is my jQuery that turns the rows into "draggable" elements:
$("#grid > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
start: function (evt, ui) {
// get the id of the row being dragged
var row_id = ui.helper.prevObject.data("id");
// get a reference to the <tr> being dragged
var original_row_element = $("#grid > tbody > tr[data-id='" + row_id + "']");
// get the collection of all <tr>'s that come after the selected row
var all_rows_after_the_original = original_row_element.nextAll("tr");
// move all those rows to a temporary holding <div> outside of the grid
$("#temp_row_holder").append(all_rows_after_the_original);
},
stop: function (evt, ui) {
// get all those rows that we moved out of the grid earlier
var all_rows_after_the_original = $("#temp_row_holder").children("tr");
// move the <tr>'s back into the grid
$("#grid > tbody").append(all_rows_after_the_original);
}
});
And here is the scrollable portion of my grid once it has been rendered by the Infragistics library:
<div id="grid_scroll" class="ui-iggrid-scrolldiv ui-widget-content igscroll-touchscrollable" data-scroll="true" data-onedirection="true" data-xscroller="#grid_hscroller" style="overflow-x: hidden; overflow-y: auto; height: 311px;">
<table id="grid" role="grid" aria-describedby="grid_scroll" cellpadding="0" cellspacing="0" border="0" class="ui-iggrid-table ui-widget-content" style="table-layout: fixed;">
<colgroup></colgroup>
<tbody role="rowgroup" class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">
<tr data-id="c3bf5936-8786-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
<tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="a2a54d20-5a83-e711-8135-caf5c8230062" role="row" tabindex="0"></tr>
<tr data-id="ca784490-cb82-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
<tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="4d95ba39-cd81-e711-8135-caf5c8230062" role="row" tabindex="0"></tr>
<tr data-id="7b02f501-cb81-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr>
</tbody>
</table>
</div>
As you can see, my current solution is to remove all sibling <tr>'s from the grid so it won't scroll when I drag my row. This solution is working just fine, but it's obviously not acceptable from the end-user perspective because all of their rows suddenly disappear when they start dragging.
It seems like there would be some CSS or javascript that could modify the grid on the "start" event to prevent it from scrolling. I have also tried fiddling with the overflow-y property because to my CSS-ignorant brain, that seems like the obvious answer, but nothing has helped.
EDIT : Here is a JS Fiddle as requested
You can use scroll option. It is true by default and causes auto-scrolls while dragging. You need scroll: false for prevent auto-scrolls like this:
$("#GRIDRFDList > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
scroll: false // Add this line
});