How to fix performance issue with drag event

0
votes

I have a table of 500 rows each one has about 50 html elements so it's quite complex.

In another pane of the same window I have a list of say 10 drop zones.

Each row of my table has the draggable attribute so it can be dragged and dropped in one of the 10 drop zones.

I am using dragenter and dragleave events to detect when the drag hovers over a drop zone and I add a simple border around the dropzone when it's under the cursor.

If my table has less than 100 rows the border highlighting is super fast.

With 500 rows it lags big time to a point where it's not acceptable.

I dont know why the complexity of the table (source of drag&drop) has direct impact on the performance of the dragenter and dragleave events...

It's as if some kind of event was sent for each one of the html elements in the table!

The table is like this:

<div class="left_pane">
    <ul>
        <li><div class="dropzone">...</div></li>
        <li><div class="dropzone">...</div></li>
        ...
        <li><div class="dropzone">...</div></li>
    </ul>
</div>
<div class="right_pane">
    <table><tbody>
        <tr draggable="true">...</tr>
        <tr draggable="true">...</tr>
        ...
        <tr draggable="true">...</tr>
    </tbody></table>
</div>

As you can see I can drag a table row from the right pane and drop it on a list element of the left pane.

The javascript code (using ext-js) looks like this:

init_component: function() {
    var left_pane_div = Ext.get(sg_find('div.left_pane',document.body));
    var right_pane_div = Ext.get(sg_find('div.righ_pane',document.body));

    // the following code is what's used while we hover over
    this.add_event(left_pane_div,'dragenter',this.on_document_dragenter);
    this.add_event(left_pane_div,'dragleave',this.on_document_dragleave);
    ...
}

on_document_dragenter: function(ext_e) {
    var e = ext_e.browserEvent;
    e.preventDefault();
    var t = Ext.get(e.target);
    if ( !t ) return;

    var drop_div = t.findParent('div.dropzone',document.body,true);
    if ( drop_div ) {
        drop_div.addClass( 'dropover' );
    }
},

on_document_dragleave: function(ext_e) {
    var e = ext_e.browserEvent;
    e.preventDefault();
    var t = Ext.get(e.target);
    if ( !t ) return;

    var drop_div = t.findParent('div.dropzone',document.body,true);
    if ( drop_div ) {
        drop_div.removeClass( 'dropover' );
    }
},

and I have some css magic to highlight a dropzone when the user hovers over it.

Again it lags big time if the table has more than 100 rows.

Either it's the event pump that cant trigger the dragenter and dragleave events fast enough or the dropzone highlighting in my left pane is causing some heavy repaints on the table of the right pane somehow...

1
javascripthtmlcssextjsdrag-and-drop
Code example would definitely help, even if it's a simplified version. – Rick Viscomi
use an outline instead of changing the border. a new border out of nowhere will cause the whole table to reflow. this is another reason why tables are slower to perform and thus bad to use as layout. also, if you can just drag a button or icon instead of the whole row, it would probably be faster... – dandavis
The border is around the drop zone which is not part of the table. My list of dropzones is in a separate pane. I could try avoiding making my <tr> elements draggable but that would be unfortunate I must say. – Éric
I did lots of investigations on this issue and still hasn't found a good solution for this... It seems that the browser is doing lots of work figuring out which element is under the cursor before sending DragEnter and DragLeave events – Éric

1 Answers