I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving.
Take a look at this basic HTML code:
<div class="box">
<div class="childbox"></div>
</div>
Here is the CSS code:
.box {
position: relative;
width: 80%;
height: 300px;
border: 1px solid black;
}
.box.dragover:after {
position: absolute;
background-color: rgba(0, 255, 0, 0.05);
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.childbox {
position: relative;
width: 100%;
height: 100%;
}
And this is the script involved:
$('.box').on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
e.preventDefault();
e.stopPropagation();
}).bind('dragover dragenter', function(e) {
e.stopPropagation();
$(this).addClass('dragover');
console.log('\nEvent: ' + e.originalEvent.type + ' --- Target: ' + this.className);
}).bind('dragleave dragend drop', function(e) {
e.stopPropagation();
$(this).removeClass('dragover');
console.log('\nEvent: ' + e.originalEvent.type + ' --- Target: ' + this.className);
});
I have created a jsfiddle at https://jsfiddle.net/n71udevm/1/. When trying to drag a file into the box, it results in a flickering effect from green to white due to the rapid firing of the dragenter and dragleave events.
I suspect the issue is related to the 'box.dragover:after' CSS. Any suggestions on how to resolve this?
Thank you.