JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label>
        <input type="hidden" name="stand[3]">3
    </label>
    <label>
        <input type="hidden" name="stand[1]">1
    </label>
    <label>
        <input type="hidden" name="stand[2]">2
    </label>
</div>
<div>
    <img src="http://automated-testing.info/images/emoji/apple/smile.png" alt="">
    <img src="http://radar.techcabal.com/images/emoji/apple/grin.png" alt="">
    <img src="http://www.stickees.com/files/emoticons/emojicons/148-happy-smile.png" alt="">
</div>
<button>GO!</button>

CSS

div:first-child {
    margin-bottom: 10px;
}

label {
    display: inline-block;
    width: 100px;
    border: 1px solid #999;
    vertical-align: bottom;
    font-size: 5em;
    text-align: center;
}

label:nth-child(1) {
    height: 100px;
}

label:nth-child(2) {
    height: 200px;
}

label:nth-child(3) {
    height: 150px;
}

button {
    display: none;
    padding: 5px 20px;
}

JavaScript

var but = $('button'),
    inp = $('[name^="stand"]');
$('img').draggable({
    revert: 'invalid'
});
$('label').droppable({
    accept: function() {
        return $.trim($('input', this).val()) === '';
    },
    tolerance: 'fit',
    drop: function(e, ui) {
        $('input', this).val(ui.draggable.attr('src'));
        $(ui.draggable).draggable('disable');
        var hasEmpty = inp.filter(function() {
            return $.trim($(this).val()) === '';
        }).length;
        but[hasEmpty ? 'hide' : 'show']();
    }
});

but.on('click', function() {
    $.ajax({
        url: '/echo/html/',
        type: 'POST',
        data: inp,
        success: function(data) {}
    });
});