Remove ghost animation (and globe icon) on drag

Let's assume that you are working with a resizable box:

html
<div id = 'Box'>
    Resize me
    <div class = 'Dragger' draggable = 'true'></div>
</div>

Here is the code in JavaScript to resize the element:

javascript
var iniMouse;
var iniSize;

const handleStart = (e) => {

    iniMouse = e.clientX;
    iniSize  = document.getElementById(`Box`).offsetWidth;

}

const handleMove = (e) => {
  
    if(e.clientX){

        document.getElementById(`Box`).style.width = `${parseInt(iniSize) + parseInt(e.clientX - iniMouse)}px`;

    }

}

const handleEnd = (e) => {
    
    window.removeEventListener('drag', handleMove);
  
}

window.addEventListener('dragstart', handleStart);
window.addEventListener('drag',      handleMove);
window.addEventListener('dragEnd',   handleEnd);

On dragging, a ghost animation will display by default in the browser. In Google Chrome, if you use dataTransfer.setDragImage() with an empty image, it'll still display a globe icon. 🌎

The trick to avoiding the ghost animation is to create a dragger element with transparent background.

CSS
#Box{
    align-items: stretch;
    border: 1px solid pink;
    display: flex;
    justify-content: space-between;
    width: 100px;
}
.Dragger{
    background: transparent;
    cursor: col-resize;
    display: block;
    width: 20px;
}