JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
    <div class="col-lg-9 col-md-9">
        <div id="edit-area">
            <div class="row">
                <div class="col-lg-12 col-md-12 active"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3" id="componentes">
        <div class="list-group">
            <button class="add list-group-item" data-componente="textbox">Textbox Group</button>
            <button class="add list-group-item" data-componente="input">Input</button>
            <button class="add list-group-item" data-componente="btn">BotĂŁo</button>
        </div>
    </div>
</div>

CSS

#edit-area {
    display: block;
    margin-bottom:20px;
    box-sizing: content-box;
    min-height: 200px;
    position: relative;
    overflow: auto;
    background: #E0E0E0;
}
.row {
    background:white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin:10px;
    padding:5px;
    min-height:30px;
}
.list-group-item {
    width: 300px !important;
}

JavaScript

$(document).ready(function () {
    var targetEl = document.getElementById('edit-area');
    var target = targetEl.getBoundingClientRect();
    var startPosition;
    var dragging = null;
    var offset;

    function offsetDiff(el, ev) {
        var elPos = el.getBoundingClientRect();
        return {
            x: ev.pageX - elPos.left,
            y: ev.pageY - elPos.top
        }
    }

    function isInsideTarget(el) {
        var elPos = el.getBoundingClientRect();
        var alignedX = target.left <= elPos.left && target.right >= elPos.right;
        var alignedY = target.top <= elPos.top && target.bottom >= elPos.bottom;
        if (alignedX && alignedY) return true;
        return false;
    }

    function drop(el, cancel) {
        dragging = null;
        el.style.position = 'relative';
        el.style.left = 'auto';
        el.style.top = 'auto';
        if (cancel) return;
        el.classList.remove('add');
        $(targetEl).append(el);
    }

    $(document.body).on("mousemove", function (e) {
        if (!dragging) return;
        $(dragging).offset({
            top: e.pageY - offset.y,
            left: e.pageX - offset.x
        });

    });


    $(document.body).on('mousedown', '.add', function (e) {
        dragging = e.target;
        offset = offsetDiff(dragging, e);
        startPosition = dragging.getBoundingClientRect();

    });

    $(document.body).on("mouseup", function (e) {
        if (!dragging) return;
        var isDroppable = isInsideTarget(dragging);
        drop(dragging, !isDroppable);
    });
});