JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div id="img"></div>

<form action="" id="control-form">
    <div id="position-info"></div>
    <button class="move-control" data-direction="left">Left</button>
    <button class="move-control" data-direction="top">Top</button>
    <button class="move-control" data-direction="bottom">Bottom</button>
    <button class="move-control" data-direction="right">Right</button>
</form>

CSS

body {
    padding: 0;
    margin: 0;
}

#control-form {
    margin-top: 200px;
}

#control-form button {
    width: 80px;
}

#img {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    background-color: #f0f0f0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

JavaScript

var $div,
    $positionInfo,
    moveOnClick,
    updateCoordinates,
    directions,
    createDirection,
    divPosition;

createDirection = function(top, left) {
    return {
        top: top,
        left: left
    };
};

directions = {
    left: createDirection(0, -10),
    right: createDirection(0, 10),
    top: createDirection(-10, 0),
    bottom: createDirection(10, 0)
};

udateCoordinates = function() {
    divPosition = $div.position();
    $positionInfo.text(divPosition.left + ';' + divPosition.top);
};


getNewPosition = function(direction) {
    return {
        top: divPosition.top + direction.top,
        left: divPosition.left + direction.left
    };
};

$div = $('#img');
$positionInfo = $('#position-info');
udateCoordinates();
moveOnClick = function(e) {
    e.preventDefault();
    var direction = $(this).data('direction');
    $div.animate(getNewPosition(directions[direction]), {
        duration: 'fast',
        complete: udateCoordinates
    });
};
$('.move-control').on('click', moveOnClick);