JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="draggable" style="left: 10px; top: 20px"></div>
    <div class="draggable" style="left: 50px; top: 60px"></div>
</body>

CSS

div { width: 10px; height: 10px; background: red; position: absolute }
div.selected { background: green }

JavaScript

var $doc = $(document), $target = null;
var keyHandler = function(e) {
    switch(e.which) {
        case 37:
            $target.css('left', '-=10px');
            break;
        case 38:
            $target.css('top', '-=10px');
            break;
        case 39:
            $target.css('left', '+=10px');
            break;
        case 40:
            $target.css('top', '+=10px');
            break;
    }
};

$doc.on('click', function(e) {
    if ($target) {
        $target.removeClass('selected');
        $doc.off('keyup', keyHandler);
        $target = null;
    }
    $target = $(e.target);
    if ($target.hasClass('draggable')) {
        $target.addClass('selected');
        $doc.on('keyup', keyHandler);
    }
    else {
        $target = null;
    }
});