Show a ghost element when dragging an element

Assume that we have a draggable element:

<div draggable="true" class="draggable">Drag me</div>

Using the draggable attribute lets the browser know that the element can be dragged around. By default, the browser will show a ghost element created from the original element when it is being dragged.

We can customize the ghost element:

// Query the element
const ele = document.getElementById('dragMe');

// The ghost element
let ghostEle;

ele.addEventListener('dragstart', function (e) {
    // Create the ghost element
    ghostEle = document.createElement('div');
    ghostEle.classList.add('dragging');
    ghostEle.innerHTML = 'I am flying';

    // Append it to `body`
    document.body.appendChild(ghostEle);

    // Customize the drag image
    e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

It's worth noting that the ghost element should be removed from the page when users drag the element:

ele.addEventListener('dragend', function (e) {
    document.body.removeChild(ghostEle);
});

In the sample code above, the ghost element is created and removed on the fly. However, it's also possible to use an existing element:

<div draggable="true" class="draggable">Drag me</div>
<div id="ghost" class="dragging">I am flying</div>

The event handler doesn't change much:

const ghostEle = document.getElementById('ghost');

ele.addEventListener('dragstart', function (e) {
    e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

Demo

Show a ghost element when dragging an element

Show a ghost element when dragging an element

Demo

See also