JSFiddle - React, Tailwind, and code Playground

by elias94xx

HTML

<body>
    <div id="xs" class="start"></div>
    <div id="ys" class="start"></div>
    <div id="xc" class="current"></div>
    <div id="yc" class="current"></div>
    
    <div id="container">
        <div id="content">
            <table>
                <tr>
                    <td>Dir: </td>
                    <td id="dir">???</td>
                </tr>
                <tr>
                    <td>Start X: </td>
                    <td id="start_x">0</td>
                </tr>
                <tr>
                    <td>Start Y: </td>
                    <td id="start_y">0</td>
                </tr>
                <tr>
                    <td>Current X: </td>
                    <td id="current_x">0</td>
                </tr>
                <tr>
                    <td>Current Y: </td>
                    <td id="current_y">0</td>
                </tr>
                <tr>
                    <td>Diff X: </td>
                    <td id="diff_x">0</td>
                </tr>
                <tr>
                    <td>Diff Y: </td>
                    <td id="diff_y">0</td>
                </tr>
            </table>
        </div>
    </div>
</body>

CSS

* { margin: 0px; padding: 0px; }

body {
    width: 100%;
    overflow: hidden;
}

#container {
    margin-top: 100px;
}

#content {
    width: 80%;
    margin: 0px auto;
    text-align: center;
    position: relative;
}

#xs, #ys, #xc, #yc {
    position: absolute;
    left: 0px; top: 0px;
    border-radius: 10000px;
    display: none;
}

.start { background-color: #F00; }
.current { background-color: #0F0; }

#xs, #xc {
    width: 1px;
    height: 100000px;
}

#ys, #yc {
    width: 10000px;
    height: 1px;
}

table {
    text-align: left;
    margin: 0px auto;
}

table td:first-child {
    text-align: right;
    padding-right: 20px;
}

JavaScript

var

diff = {}, dir, startPos,
    
    $dir = $("#dir"),
    $start_x = $("#start_x"),
    $start_y = $("#start_y"),
    $current_x = $("#current_x"),
    $current_y = $("#current_y"),
    $diff_x = $("#diff_x"),
    $diff_y = $("#diff_y");


document.addEventListener("touchstart", function(e) {
    
    e.preventDefault();
    e.stopPropagation();
    
    startPos = e.targetTouches[0];
    
    $start_x.html(startPos.pageX);
    $start_y.html(startPos.pageY);
    
    $("#xs").css({ left: startPos.pageX }).show();
    $("#ys").css({ top: startPos.pageY }).show();
    
}, false);

document.addEventListener("touchmove", function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    currentPos = e.touches[0];
    
    diff.x = startPos.pageX - currentPos.pageX;
    diff.y = startPos.pageY - currentPos.pageY;
    dir = startPos.pageX - currentPos.pageX > 0 ? "left" : "right";
    
    $("#xc").css({ left: currentPos.pageX }).show();
    $("#yc").css({ top: currentPos.pageY }).show();
    
    $dir.html(dir);
    
    $current_x.html(currentPos.pageX);
    $current_y.html(currentPos.pageY);
    
    $diff_x.html(diff.x);
    $diff_y.html(diff.y);
}, false);