Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jack
815
Jquery UI Drag & Drop with igGrid Rows
posted

I am using IgniteUI version 16.2.20162.2040 and JqueryUI version 1.11.4.

I have an igGrid with a height of 375px and I have set all the rows in this grid to be draggable using the JqueryUI library. My drop target is another div outside of the grid. I can drag and drop rows successfully onto my drop targets, but the problem happens when my draggable row is dragged beyond the bottom of the grid. The grid begins to scroll as I drag the row outside of the grid.

I need the ability to drag a row outside of the grid without the grid scrolling.

Here is sample of the scrollable portion of my grid:







   





       


       


           


           


           


           


           


       


   

And here is a sample of my JqueryUI code that makes the rows draggable:



$("#RFDList > tbody > tr").draggable({


        helper: "clone",


        revert: "invalid",


        cursorAt: { bottom: 0, left: 0 }


    });

Parents
No Data
Reply
  • 815
    Offline posted

    It looks like something went wrong with my initial post. Here is the code for the scrollable portion of my grid:

    

        <div id="RFDList_scroll" class="ui-iggrid-scrolldiv ui-widget-content igscroll-touchscrollable" data-scroll="true" data-onedirection="true" data-xscroller="#RFDList_hscroller" style="overflow-x: hidden; overflow-y: auto; height: 311px;">
    

            <table id="RFDList" role="grid" aria-describedby="RFDList_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>

Children