How to determine if a div is hit while moving to another

It is a lot of methods, depends on your implementation.
If via HTML5 ( draggable ), then use the dragover event, which is activated when placing the drag object in the zone of the element being listened to.
True [event] occurs very often, is solved by regulation of the function.

 let res = document.querySelector('#res'); function _dragOver(e){ // Много, много раз e.stopPropagation(); e.preventDefault(); console.info('Я над зоной посадки!'); e.dataTransfer.dropEffect = "copy"; } res.addEventListener("dragover", _dragOver, false); 

 #draggable{ padding: 10px; border: 1px solid red; width: 70px; cursor: pointer; } #res{ padding: 20px; width: 100px; border: 1px solid gray; } 

 <div id="draggable" draggable='true' class="ui-widget-content"> <p>блок один</p> </div> <div id='res'> <p>блок два</p> </div> 

If in the old-fashioned way, via onmousedown / onmousemove / onmouseup , then in the onmousemove event onmousemove take the cursor coordinates ( Event.pageX / Event.pageY ) and see if there is a landing zone ( Document.elementFromPoint , Element.closest ) on these coordinates.

https://developer.mozilla.org/en-US/docs/Web/Events/drag

`This div is draggable

 <style> #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } </style> <script> var dragged; /* events fired on the draggable target */ document.addEventListener("drag", function( event ) { }, false); document.addEventListener("dragstart", function( event ) { // store a ref. on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addEventListener("dragover", function( event ) { // prevent default to allow drop event.preventDefault(); }, false); document.addEventListener("dragenter", function( event ) { // highlight potential drop target when the draggable element enters it if ( event.target.className == "dropzone" ) { event.target.style.background = "purple"; } }, false); document.addEventListener("dragleave", function( event ) { // reset background of potential drop target when the draggable element leaves it if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } }, false); document.addEventListener("drop", function( event ) { // prevent default action (open as link for some elements) event.preventDefault(); // move dragged elem to the selected drop target if ( event.target.className == "dropzone" ) { event.target.style.background = ""; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); } }, false);` </script>