JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="http://jon-carlos.com/kickingnscreaming/kickingnscreaming.js"></script>
<h2>Items</h2>
<div id="itemslot">
    <div id="bow" style="width:'46px';height:'46px';border:'1px solid';position: relative;" class="bow" data-drag-classes="weapon item">Bow of Dragging</div>
</div>
<h2>Character</h2>
<div id="character"></div>
<h2>Inventory</h2>
<div id="inventory"></div>

<div id="output"></div>

CSS

#itemslot {
    width:50px;
    display:block;
    position:relative;
    background-color:yellow;
}
#inventory, #character {
    width:100px;
    height:100px;
    display:block;
    position:relative;
    background-color:yellow;
}

.sword { background-color:red; }
.armor { background-color:green; }
.bow { background-color:orange; }

JavaScript

var myDragHelper = new KickingNScreaming({    
    dragover: function (e) {
        if (!e.currentTarget.childNodes.length) {
            e.preventDefault();
        }
    },
    
    drop:  function (e, draggable) {
        if (draggable) {
            e.currentTarget.appendChild(draggable);
            e.currentTarget.style.outline = null;
        }
        e.preventDefault();
    }
});

function getItem(itemclass, itemtypes) {
    var recipient = document.getElementById("itemslot");
    var element = document.createElement("div");
    element.style.width = "46px";
    element.style.height = "46px";
    element.style.borderWidth = "1px";
    element.style.borderStyle = "solid";
    element.style.position = "relative";
    element.id = "i" + Math.random();
    recipient.appendChild(element);
    element.className = itemclass;
    element.innerHTML = itemclass;
    myDragHelper.makeDraggable(element, itemtypes);
}

function createCharacter() {
    var recipient = document.getElementById("character");
    for (var x = 0; x < 2; x++) {
        for (var y = 0; y < 2; y++) {
            var element = document.createElement("div");
            element.id = "slot_" + x + "_" + y;
            element.style.width = "48px";
            element.style.height = "48px";
            element.style.marginLeft = x * 48 + "px";
            element.style.marginTop = y * 48 + "px";
            element.style.position = "absolute";
            if (y === 0) {
                element.style.backgroundColor = "darkred";
                myDragHelper.makeDroppable(element, 'weapon');
            } else if (y === 1) {
                element.style.backgroundColor = "darkgreen";
                myDragHelper.makeDroppable(element, 'armor');
            }
            recipient.appendChild(element);
        }
    }
}

function createInventory() {
    var recipient = document.getElementById("inventory");
    for (var x = 0; x < 2; x++) {
        for (var y = 0; y < 3; y++) {
            var...