JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="test_div"></div>

CSS

html, body {
    background-color: #0055aa;
    height: 100%;
    width: 100%;
}

#test_div {
    height: 100px;
    width: 100px;
    background-color: #fff;
    position:absolute;
}

JavaScript

// touch device mouse position

mouse_position = function (mode, event, id) {
    'use strict';
    var offset = $(id).offset(), pageX, pageY;
    
    pageX = (event.originalEvent.touches !== undefined ? event.originalEvent.touches[0].pageX: event.pageX);
    pageY = (event.originalEvent.touches !== undefined ? event.originalEvent.touches[0].pageY: event.pageY);
    
    if (mode === 'top') {
        return pageY - offset.top;
    }
    if (mode === 'left') {
        return pageX - offset.left;
    }
    return '';
};

// touch position
$('#test_div').on('touchstart touchmove', function (e) {
    var xPos = mouse_position('left', e, 'body')//e.originalEvent.touches[0].pageX,
        yPos = mouse_position('top', e, 'body')//e.originalEvent.touches[0].pageY;
        
    $('#test_div').css({'left': xPos + 'px',
                        'top': yPos + 'px'});
    
    e.preventDefault();
});