JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DnD Chrome Test</title>
</head>
<body>
    Please drag the red square over the dotted one.
    <div><pre>dragover</pre> triggered <span id='counter'>0</span> times</div>
    <div id='draggable' draggable='true'></div>
    <div id='dropzone'></div>
</body>
</html>

CSS

body {
    font: 13px/15px "Helvetica Neue", Helvetica, sans-serif;
}

pre {
    display: inline;
}

#draggable{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px 5px;
}

#dropzone {
    width: 100px;
    height: 100px;
    border: 5px dashed #333;
}

JavaScript

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}
    

dropzone.addEventListener('dragover', onDragOver, false);