JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="main">
    
    <div id="box" data-left="240" data-top="240"></div>
    
</div>

CSS

#main{
    width: 600px;
    height:600px;
    border: 1px solid black;
}
#box{
    width: 60px;
    height: 60px;
    background-color: red;  
    position: relative;
    font-size: 12px;
}

JavaScript

$("#box").css("left",$("#box").data("left")+"px").css("top",$("#box").data("top")+"px");

$(document).keydown(function(event) {
    var step = 60;
    var main_height = $("#main").height();
    var main_width  = $("#main").width();
    var left = $("#box").data("left");
    var top  = $("#box").data("top");
    
    if(event.keyCode == 39){ // right
        step = step  + left;
        if(step < main_width){
            $("#box").css("left",step+"px").data("left",step);
        }
    }else if(event.keyCode == 37){ // left
        step = left - step;
        if(step >= 0){
            $("#box").css("left",step+"px").data("left",step);
        }        
    }else if(event.keyCode == 40){ // down
        step = step + top;
        if(step < main_height){
            $("#box").css("top",step+"px").data("top",step);
        }        
    }else if(event.keyCode == 38){ // up
        step = top - step;
        if(step >= 0){
            $("#box").css("top",step+"px").data("top",step);
        }        
    }    
});