javascript - Vue：元素响应太慢而无法拖动事件

问题描述

我有一个页面基本上有两部分：左栏和右栏（更大的区域）。右列包含大约 1500 行（组件），每行包含 5 个 div 作为单元格。我曾经在这两列的父元素上绑定dragover事件。每次触发 dragover 事件时，都会出现一个覆盖 div 并覆盖整个窗口区域。下面的例子：

Javascript

let row = {
    props: ['item'],
    template: `<div class="row">
                   <div class="cell">{{item.value1}}</div>
                   <div class="cell">{{item.value2}}</div>
                   <div class="cell">{{item.value3}}</div>
                   <div class="cell">{{item.value4}}</div>
                   <div class="cell">{{item.value5}}</div>
               </div>
};

new Vue({
    el: '#parent',
    components: {
        'row': row
    },
    template: `<div id="parent" @dragover="showOverlay">
                   <!-- display if this.overlay == true, otherwise hide -->
                   <div class="overlay" v-show="overlay"></div>

                   <div class="left-column">Drag a file and drop</div>
                   <div class="right-column">
                       <row :rows="rows" v-for="item in rows"></row>
                   </div>
               </div>`,
    data: {
        rows: [...],
        overlay: false
    },
    methods: {
        showOverlay(e) {
            e.preventDefault();
            this.overlay = true;
        }
    }
});

尽管滚动列表有点滞后，但代码运行正常。但是当我将文件拖到右列区域时，需要几秒钟才能显示覆盖，而拖到左列只需要不到一秒钟。

HTML

<div id="parent"></div>

标签： javascriptvue.jsdrag-and-drop

javascript - Vue：元素响应太慢而无法拖动事件

问题描述

解决方案

推荐阅读