我有一个500行的表，每行有大约50个html元素，所以它相当复杂。
在同一个窗口的另一个窗格中，我有一个列表，比如说10个拖放区。
我的表的每一行都具有可拖动属性，因此可以将其拖放到10个拖放区中的一个。
我使用dragenter和dragleave事件来检测拖动悬停在拖放区上的时间，并在光标位于拖放区周围时添加一个简单的边框。
如果我的表少于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魔法，当用户将鼠标悬停在某个下拉区域上时，可以将其高亮显示。
同样，如果表的行数超过100行，则会延迟很长时间。
要么是事件泵不能足够快地触发dragenter和dragleave事件，要么是我的左窗格中的dropzone高亮显示不知何故导致了右窗格的表上的一些重绘...