JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div id=one>
    This is one
    <div id=two>
        This is two
    </div>
</div>
<div>
    <ul id=items>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>
<div id='msg'></div>

CSS

#one { position:absolute;width:200px;height:200px;background:brown;left:150px;top:25px }
#two { position:absolute;width:100px;height:100px;background:yellow;left:50px;top:50px}

JavaScript

/*
http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js
http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css
http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css
*/

var counter=0;

var msg = function(text, e) {
    debugger;
    $('#msg').prepend(text + '<br/>');
}

$('#items li').addClass('k-button').kendoDraggable({
    hint: function(item) {
        return $(item).clone();
    }
});

$('#one').kendoDropTarget({
    drop: function(e) { msg(counter++ +'. dropped on #one', e);}
});

$('#two').kendoDropTarget({
    drop: function(e) { msg(counter++ +'. dropped on #two');}
});