JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<span class="square"> 1 </span>
<span class="square"> 1 </span>
<span class="square"> 1 </span>
<span class="holder"></span>
<span class="square-big"> 1 </span>
<span class="holder"></span>
<span id="output"></span>

CSS

.square {
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    background-color: #00ff00;
    position: relative;
}
.holder {
    height: 300px;
}
.square-big {
    width: 150px;
    height: 150px;
    margin: 10px;
    display: inline-block;
    background-color: #ff0000;
}
.selected {
    opacity: 0.2;
    background-color: blue;
}

JavaScript

$('.square').on('touchstart', function(e){

}).on('touchmove',function(e){
    var touch = e.originalEvent.touches[0];
    var elm = $(this).offset();
    var x = touch.screenX - elm.left;
    var y = touch.screenY - elm.top;
    $(this).addClass('selected').css({
        left: x,
        top: y
    });
    $('.square-big').addClass('selected');
    $('#output').text(x + '   ' + y + '  ' + elm.left);
}).on('touchend', function(e){
    $(this).removeClass('selected');
    $('.square-big').removeClass('selected');
});