JSFiddle - React, Tailwind, and code Playground
HTML
<div style="left: 10px; top: 20px"></div>
<div style="left: 50px; top: 60px"></div>
CSS
div { width: 10px; height: 10px; background: red; position: absolute }
div.selected { background: green }
JavaScript
jQuery(function($){
var $div;
$(document).keydown(function(e){
if(!$div) return;
switch(e.which){
case 37:
$div.css('left', $div.offset().left - 10);
break;
case 38:
$div.css('top', $div.offset().top - 10);
break;
case 39:
$div.css('left', $div.offset().left + 10);
break;
case 40:
$div.css('top', $div.offset().top + 10);
break;
}
});
$(document).click(function(e){
if($div)
$div.removeClass('selected');
$div = null;
return false;
});
$('div').click(function(e){
if($div)
$div.removeClass('selected');
$div = $(this);
$div.addClass('selected');
return false;
});
});