mouse drag: <div id="myElement" style="position: absolute;"><font size=+3>🔴🟢🔵🟡🟣</font></div>
<a href="drag.htm">mouse drag</a> 
<a href="touch.htm">touch & drag</a> 

<script>
const myEle = document.getElementById('myElement');

let offsetX, offsetY, isDragging = false;

myEle.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - myEle.offsetLeft;
    offsetY = e.clientY - myEle.offsetTop;
    myEle.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        myEle.style.left = (e.clientX - offsetX) + 'px';
        myEle.style.top = (e.clientY - offsetY) + 'px';
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    myEle.style.cursor = 'grab'; // Or default
});

// Prevent default browser drag
myEle.ondragstart = () => false;
</script>