JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<div class="draggableTarget">
    <div class="draggableElement">
    </div>
    <div class="draggableElement">
    </div>
    <div class="draggableElement">
    </div>
</div>
<div class="draggableTarget">
</div>

CSS

.draggableElement { cursor: move; width: 50px; height: 50px; border: 1px solid green; }
.draggableTarget { width: 200px; height: 200px; border: 1px solid red; margin: 100px; }
.draggableTarget.draggableHighlightedTarget { border: 1px dashed red !important; }
.draggableDraggedObject { border: 2px solid red !important; }

JavaScript

/*
http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js
*/

function draggableOnDragStart(e) {
    $('.draggableTarget').addClass('draggableHighlightedTarget');
    this.element.addClass("draggableDraggedObject");
}

function draggableOnDragEnd(e) {
    $(".draggableElement").removeClass("draggableDraggedObject");
    $(".draggableTarget").removeClass("draggableHighlightedTarget");
}

$(document).ready(function () {
    initializeKendoDragAndDrop();
});

function initializeKendoDragAndDrop() {
    $(".draggableElement").kendoDraggable({
        hint: function (element) {
            return element.clone();
        },
        dragstart: draggableOnDragStart,
        dragend: draggableOnDragEnd
    });

    $(".draggableTarget").kendoDropTarget({
        dragenter: function (e) {
            var $target = $(e.target);
        },
        dragleave: function (e) {
            var $target = $(e.target);
        },
        drop: function (e) {
            var $target = $(e.target);
            this.element.html(this.element.html() + e.draggable.element[0].outerHTML);
            e.draggable.currentTarget.remove();
            initializeKendoDragAndDrop();
        }
    });
}