One part of my webpage consists of two columns, a left column and a much larger right column. The right column contains around 1500 rows of components, each row having 5 div cells. I have set up a dragover event on the parent element that encompasses these two columns. Whenever the dragover event is triggered, an overlay div should appear and cover the entire window area as shown in the example code snippet below:
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;
}
}
});
While the code works fine, there seems to be some lag while scrolling through the list. Additionally, when dragging a file over the right column, it takes a few seconds for the overlay to appear compared to less than a second when dragging onto the left column.
HTML
<div id="parent"></div>