JSFiddle - React, Tailwind, and code Playground
HTML
<div id="player"></div>
<br /><br /><br /><br /><br /><br />
Click and Hold:
<br /><br />
<input id="arrowLeft" type="button" value="<< Move Left" />
<input id="arrowRight" type="button" value="Move Right >>" />
CSS
#player{
position:absolute;
width:100px;
height:100px;
background-color:blue;
}
JavaScript
var isDown = false;
$arrowRight = $("#arrowRight");
$arrowLeft = $("#arrowLeft");
$arrowRight.mousedown(function(){isDown = true;});
$arrowLeft.mousedown(function(){isDown = true;});
$(document).mouseup(function(){
if(isDown){
isDown = false;
}
});
$arrowRight.mousedown(function() {movePlayer('+=20');});
$arrowLeft.mousedown(function() {movePlayer('-=20');});
function movePlayer(intMovement){
$( "#player" ).animate({
'left': intMovement +'px'
}, 50, function() {
if (isDown){
movePlayer(intMovement);
}
});
}