Show a ghost element when dragging an element

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

// 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);
});

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

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

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

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