JSFiddle - React, Tailwind, and code Playground

by Radosław Miernik

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js">
        </script>
    </head>
    <body>
        <div id="equipment">
            <div class="slot weapon">BROŃ</div>
            <div class="slot armor">ZBROJA</div>
        </div>
        <div id="bagpack">
            <div id="1515" class="item weapon">Broń 1</div>
            <div id="4440" class="item weapon">Broń 2</div>
            <div id="51121" class="item armor">Zbroja 1</div>
            <div id="1445" class="item armor">Zbroja 2</div>
        </div>
    </body>
</html>

CSS

#equipment, #bagpack, .slot, .item {
    text-align: center;
    margin: 5px;
    float: left;
}

#equipment {
    height: 250px;
    width: 250px;
    background: #CDD;
    border: 1px #000 solid;
    padding: 10px;
}
#bagpack {
    height: 250px;
    width: 500px;
    background: #DCD;
    border: 1px #000 solid;
    padding: 10px;
}

.item {
    height: 50px;
    width: 50px;
    background: #EEE;
    border: 1px #AAA dashed;
    padding: 2.5px;
}

.slot {
    height: 60px;
    width: 60px;
    background: #FFF;
    border: 1px #000 double;
    padding: 5px;
}

JavaScript

function itemEquip(item, slot) {
    var oldItem = $(slot).find('id', 'class');
    if (oldItem.length > 0) {
        oldItem.appendTo('#bagpack').draggable({
            revert: 'invalid'
        });
    }
    var newItem = $('<div></div>');
    newItem.attr('class', item.attr('class'))
           .html(item.html())
           .appendTo(slot)
           .draggable({
               revert: 'invalid'
           });
    item.remove();
}
$(document).ready(function() {
    $('#bagpack').droppable({
        accept: '.item',
        drop:function(e,ui){
            if(ui.helper.hasClass('armor')) 
                $('.slot.armor').droppable('enable');
        }
    });
    $('.slot.weapon').droppable({
        accept: '.item.weapon'
    });
    $('.slot.armor').droppable({
        accept: '.item.armor',
        drop:function(){
            $(this).droppable('disable');
        }
    });
    $('.item').draggable({
        revert: 'invalid'
    });
    $('#bagpack, .slot').bind('drop', function(ev, ui) {
        itemEquip(ui.draggable, this);
    });
});