JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="pane">
    <div id="barrier"><div id="box"></div></div>
    
</div>

CSS

#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}
    
#box {
    xposition:absolute; xtop:140px; xleft:140px;
    width:20px; height:20px;          
    background-color:black;
}
#barrier{
    position:relative; top:50px; left:50px;
    width:50px; height:50px;          
    background-color:grey; 
}

JavaScript

var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

$(function(){
    $( "#box" ).draggable({ containment: "#barrier", scroll: false });
});


function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);