extjs 如何修复拖动事件的性能问题

tcbh2hod  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(137)

我有一个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高亮显示不知何故导致了右窗格的表上的一些重绘...

相关问题