JSFiddle - React, Tailwind, and code Playground

by RichardAD

HTML

<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">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div class="demo-items">
<ul class='k-group var-list'>
<span class='group-header'>Items</span>
<li class='k-button' id='A'>A</li>
<li class='k-button'>B</li>
<li class='k-button'>C</li>
<li class='k-button'>D</li>
<li class='k-button'>E</li>
<li class='k-button'>F</li>
</ul>

<div class='k-group dynatree-dropdiv'>
<span class='group-header'>Drop site</span>
</div>

</div>
<div id='msg'></div>

CSS

.k-button { padding: 18px }
.group-header {width:8em; font-weight:bold; display:inline-block}
.var-list { height: 5em; padding: 5px; border:2px solid black; background: #EAEAEA }
.dynatree-dropdiv{ height:13em; border:2px solid black; background: #EAEAEA; margin-top:12px   }
.droppable { background:#FAFAFA; border:2px solid blue }

JavaScript

$(document).ready(function() {
    $('.demo-items .k-button').kendoDraggable({
        hint: function(item) {
            return $(item).clone();
        }
    });

    $('div.dynatree-dropdiv').kendoDropTarget({
        drop: function(e) {
            var $source = e.draggable.currentTarget;
            var $destination = this.element;
            var $tree = $destination.find('#tree1');
            var ktv = $tree.data('kendoTreeView');

            $source.removeClass('k-button');

            if (ktv) {
                ktv.append($source, $tree.data('last-append'));
            } else {
                $('<ul id="tree1"/>').append($source).appendTo($destination).kendoTreeView({
                    height: '100%'
                });
            }

            $('#tree1').data('last-append', $source);
            $(this.element).closest('.k-group').removeClass('droppable');
        },
        dragenter: function(e) {
            $(this.element).closest('.k-group').addClass('droppable');
        },
        dragleave: function(e) {
            $(this.element).closest('.k-group').removeClass('droppable');
        }
    });
});