Remove ghost animation (and globe icon) on drag

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

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

Here is the code in JavaScript to resize the element:

var iniMouse;
var iniSize;

const handleStart = (e) => {

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


const handleMove = (e) => {

        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.

    align-items: stretch;
    border: 1px solid pink;
    display: flex;
    justify-content: space-between;
    width: 100px;
    background: transparent;
    cursor: col-resize;
    display: block;
    width: 20px;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.