Question

我使用IgniteUI 16.2版本从Infragistics获得了一个igGrid。

我试图使用＆＃34; draggable＆＃34;使行可拖动。来自jQuery UI版本1.11.4的库（与jQuery版本1.11.3结合使用）。

我的＆＃34; droppable＆＃34; target是igGrid之外的div。

只要我留在网格中，我就可以拖放行。但是，只要我尝试将行拖到网格之外，网格就会开始滚动。

这是我的jQuery将行转换为＆＃34; draggable＆＃34;元素：

$("#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可以修改＆＃34; start＆＃34;事件，以防止它滚动。我也尝试摆弄overflow-y属性，因为我的CSS无知的大脑，这似乎是明显的答案，但没有任何帮助。

编辑： Here是按要求提供的JS小提琴

Answer 1

您可以使用 scroll 选项。默认情况下为true，并在拖动时导致自动滚动。你需要scroll: false来阻止这样的自动滚动：

$("#GRIDRFDList > tbody > tr").draggable({
        helper: "clone",
        revert: "invalid",
        cursorAt: { bottom: 0, left: 0 },
        scroll: false // Add this line
    });

Online output (fiddle)

Infragistics igGrid + jQuery UI Drag＆amp;降

1 个答案: