Infragistics igGrid + jQuery UI Glisser & Déposer

Question

J'ai un igGrid de Infragistics utilisant IgniteUI version 16.2.

J'essaie de rendre les lignes pouvant être déplacées en utilisant la bibliothèque "draggable" de jQuery UI version 1.11.4 (combinée avec jQuery version 1.11.3).

Ma cible "droppable" est une div à l'extérieur de l'igGrid.

Je suis capable de faire glisser et déposer les rangs très bien tant que je reste dans la grille. Cependant, dès que j'essaie de faire glisser la ligne en dehors de la grille, la grille commence à défiler.

Voici mon jQuery qui transforme les lignes en éléments « 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); 

    } 
}); 

Et voici la partie scrollable de ma grille une fois qu'il a été rendu par la bibliothèque 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> 

Comme vous pouvez le voir, ma solution actuelle consiste à supprimer tous les <tr> frères et sœurs de la grille afin qu'il ne défile pas lorsque je fais glisser ma ligne. Cette solution fonctionne très bien, mais elle n'est évidemment pas acceptable du point de vue de l'utilisateur final car toutes ses lignes disparaissent soudainement lorsqu'elles commencent à glisser.

Il semble qu'il y aurait du CSS ou du javascript qui pourrait modifier la grille sur l'événement "start" pour l'empêcher de défiler. J'ai aussi essayé de jouer avec la propriété overflow-y parce que pour mon cerveau ignorant CSS, cela semble être la réponse évidente, mais rien n'a aidé.

EDIT:Here est un JS Fiddle comme demandé

Answer 1

Vous pouvez utiliser l'option scroll. Par défaut, il est true et provoque un défilement automatique lors du glissement. Vous avez besoin scroll: false pour empêcher défile auto-comme ceci:

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

Online output (fiddle)