Infragistics igGrid + jQuery UI 拖放
Infragistics igGrid + jQuery UI Drag & Drop
我有一个 Infragistics 的 igGrid,使用 IgniteUI 版本 16.2。
我正在尝试使用 jQuery UI 版本 1.11.4 中的 "draggable" 库(结合 jQuery 版本 1.11.3)使行可拖动.
我的 "droppable" 目标是 div 在 igGrid 之外。
只要我留在网格内,我就可以很好地拖放行。但是,一旦我尝试将行拖出网格,网格就会开始滚动。
这是我的 jQuery 将行转换为 "draggable" 元素:
$("#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);
}
});
下面是我的网格在 Infragistics 库渲染后的可滚动部分:
<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>
如您所见,我当前的解决方案是从网格中删除所有同级 <tr>
,这样当我拖动我的行时它就不会滚动。这个解决方案工作得很好,但从最终用户的角度来看显然是不可接受的,因为当他们开始拖动时,他们所有的行突然消失了。
似乎会有一些 CSS 或 javascript 可以修改 "start" 事件上的网格以防止其滚动。我也尝试摆弄 overflow-y
属性 因为对我 CSS-无知的大脑来说,这似乎是显而易见的答案,但没有任何帮助。
编辑: Here 是请求的 JS Fiddle
您可以使用 scroll 选项。默认情况下为 true
并会在拖动时自动滚动。您需要 scroll: false
来防止这样的自动滚动:
$("#GRIDRFDList > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
scroll: false // Add this line
});
我有一个 Infragistics 的 igGrid,使用 IgniteUI 版本 16.2。
我正在尝试使用 jQuery UI 版本 1.11.4 中的 "draggable" 库(结合 jQuery 版本 1.11.3)使行可拖动.
我的 "droppable" 目标是 div 在 igGrid 之外。
只要我留在网格内,我就可以很好地拖放行。但是,一旦我尝试将行拖出网格,网格就会开始滚动。
这是我的 jQuery 将行转换为 "draggable" 元素:
$("#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);
}
});
下面是我的网格在 Infragistics 库渲染后的可滚动部分:
<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>
如您所见,我当前的解决方案是从网格中删除所有同级 <tr>
,这样当我拖动我的行时它就不会滚动。这个解决方案工作得很好,但从最终用户的角度来看显然是不可接受的,因为当他们开始拖动时,他们所有的行突然消失了。
似乎会有一些 CSS 或 javascript 可以修改 "start" 事件上的网格以防止其滚动。我也尝试摆弄 overflow-y
属性 因为对我 CSS-无知的大脑来说,这似乎是显而易见的答案,但没有任何帮助。
编辑: Here 是请求的 JS Fiddle
您可以使用 scroll 选项。默认情况下为 true
并会在拖动时自动滚动。您需要 scroll: false
来防止这样的自动滚动:
$("#GRIDRFDList > tbody > tr").draggable({
helper: "clone",
revert: "invalid",
cursorAt: { bottom: 0, left: 0 },
scroll: false // Add this line
});