JSFiddle - React, Tailwind, and code Playground

by PhillipSenn

CSS

#ball{
	position:absolute;
	width:110px;
	height:110px;
	top:50%;
	left:50%;
	z-index:1000;
	background:url('http://www.phillipsenn.com/Matrix/jQuery/TrickShots/assets/img/ball.png') no-repeat;
}

JavaScript

var request = {};
request.dom = {};

request.dom.ball = $('<div id="ball"></div>').appendTo('body');
request.dom.top = $('<div id="top"></div>').appendTo('body');
request.dom.left = $('<div id="left"></div>').appendTo('body');


(function() {
	// Listen for mouse and touch events
	request.dom.ball.on('mousedown touchstart',myTouchStart);
	
	function myTouchStart(myEvent){
		var local = {};
		
		local.startPosition = {};
		local.elementPosition = {};
		myEvent.preventDefault();
		
		// Normalizing the touch event object
		myEvent = (myEvent.originalEvent.touches) ? myEvent.originalEvent.touches[0] : myEvent;
		
		// Recording current positions
		local.startPosition.x = myEvent.pageX;
		local.startPosition.y = myEvent.pageY;
		local.elementPosition.x = request.dom.ball.offset().left;
		local.elementPosition.y = request.dom.ball.offset().top;
		
		// These event listeners will be removed later
		request.dom.ball.on('mousemove.myNameSpace touchmove.myNameSpace', myTouchMove(local));
	};
    
    function myTouchMove(local) {
        return function(myEvent) {
            var myCss = {};
            
            myEvent = (myEvent.originalEvent.touches) ? myEvent.originalEvent.touches[0] : myEvent;
            myCss.top = local.elementPosition.y + myEvent.pageY - local.startPosition.y;
            request.dom.top.text(myCss.top);
            myCss.left = local.elementPosition.x + myEvent.pageX - local.startPosition.x;
            request.dom.left.text(myCss.left);
            request.dom.ball.css(myCss);
        };
    }
	
	request.dom.ball.on('mouseup touchend',myTouchEnd);
	
	function myTouchEnd(){
		// Removing the heavy mousemove and touchmove listeners
		request.dom.ball.off('.myNameSpace');
		request.dom.top.text(0);
		request.dom.left.text(0);
		
	};
})();