JSFiddle - React, Tailwind, and code Playground
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);
};
})();