drag me: <div id="myElement" style="position: absolute;"><font size=+3>🙁✔️</font></div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<a href="drag.htm">mouse drag</a> 
<a href="touch.htm">touch & drag</a> 

<script>
// touch events
var x0=0, y0=0, left0, top0;

$('#myElement').on('touchstart', function(event) {
    var touch = event.originalEvent.touches[0];
    x0 = touch.pageX;
    y0 = touch.pageY;
    left0 = $(this).position().left;
    top0 = $(this).position().top;
});

$('#myElement').on('touchmove', function(event) {
    event.preventDefault();	// Prevent default scrolling behavior
    var touch = event.originalEvent.touches[0];
    var dx = touch.pageX - x0;
    var dy = touch.pageY - y0;

    $(this).css({
        left: left0 + dx,   top: top0 + dy
    });
});

$('#myElement').on('touchend', function() {
	// Optional: Reset variables or perform final actions
});
</script>

<script>
// mouse events
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>