JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="treeview"></div>

<textarea id="editor" rows="5" cols="10" style="width:100%;height:400px"></textarea>

JavaScript

$.fn.outerHTML = function(){
    var div = $('<div></div>');
    div.append($(this));
    return div.html();
};
$("#treeview").kendoTreeView({
    template: kendo.template("<div id='draggablenode'>#=item.text#</div>"),
    dragAndDrop: true,
    dataSource: [
        {
        text: "Parent Node",
        expanded: true,
        items: [
            {
            text: "Node 1"},
        {
            text: "Node 2"},
        {
            text: "Node 3"}
        ]},
        ],
    dragstart: function(e) {
        $('.k-content').parent().append('<div style="width:' + $('.k-content').parent().outerWidth() + 'px;border:0;margin:0;padding:0;display:inline;vertical-align:top;height:'+$('.k-content').parent().outerHeight() + 'px;z-index: 10;position:absolute;left:0px;" class="overlay"></div>');
        $('.overlay').kendoDropTarget({
            drop: function(e) {
                debugger;
                var element = $(e.draggable.hint).clone(true);
                var top = e.draggable.drag.y.location - $('.k-content').offset().top;
                var left= e.draggable.drag.x.location - $('.k-content').offset().left;
                element.css({
                    top: top + 'px',
                    left: left + 'px'
                });
                $('.overlay').remove();
                $('.k-content').contents().find('body').html($('.k-content').contents().find('body').html() + $(element).outerHTML());
            }
        });
    }
});

$("#editor").kendoEditor();