Question

我有一个500行的表，每行有大约50个html元素，所以它非常复杂。

在同一个窗口的另一个窗格中，我有一个10个丢弃区域列表。

我的表格的每一行都有可拖动的属性，因此可以在10个放置区域之一中拖放它。

我正在使用dragenter和dragleave事件来检测拖动悬停在放置区域上的时间，并且当它位于光标下方时，我会在dropzone周围添加一个简单的边框。

如果我的表格少于100行，则边框突出显示速度非常快。

如果有500行，那么它就会落后于不可接受的程度。

我不知道为什么桌子的复杂性（拖拽和掉落的来源）直接影响了dragenter和dragleave事件的表现......

就好像为表格中的每个html元素发送了某种事件一样！

表格如下：

<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>

如您所见，我可以从右侧窗格拖动一个表格行并将其放在左侧窗格的列表元素上。

javascript代码（使用ext-js）如下所示：

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' );
    }
},

我有一些css魔法可以在用户将鼠标悬停在其上时突出显示一个dropzone。

如果表格超过100行，那么它的时间也会延长。

要么事件泵不能触发dragenter并且拖拽事件的速度足够快，要么我的左窗格中的dropzone突出显示会导致右窗格的桌子上有一些沉重的重新绘制......

Answer 1

使用去抖动功能。更多详情：

https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086?gi=73510eb50568

如何使用拖动事件修复性能问题

1 个答案: