JSFiddle - React, Tailwind, and code Playground

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 dropsite'>
<span class='group-header'>Columns</span>
<li class='k-button'>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>
<li class='k-button'>G</li>
<li class='k-button'>$</li>
<li class='k-button'>Period</li>
</ul>

<ul class='k-group dropsite'><span class='group-header'>Make a Nested look</span></ul>

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

CSS

.group-header {width:8em; font-weight:bold; display:inline-block}
.k-group { height: 6em; padding: 5px; border:2px solid black; background: #EEE }
.droppable { background:#FAFAFA; border:2px solid blue }

.tier1{ padding-left:1em; padding-right:1em; width:2em }
.tier2{ padding-left:1em; padding-right:1em; width:2em }
.tier3{ padding-left:1em; padding-right:1em; width:2em }

JavaScript

$(document).ready(function() {
    function msg(text){
$('#msg').prepend(text+'<br/>');
    }
msg('ready');

  $('.demo-items ul.dropsite').kendoDraggable({
    filter: '.k-button',
    hint: function (item) { return $(item).clone(); }
  });

  $('.demo-items ul.dropsite').kendoDropTarget({
    drop: function (e) {
       this.element.append(e.draggable.currentTarget)
       .closest('.k-group').removeClass('droppable')
    },
      dragenter: function (e) {
msg('enter');
        $(this.element).closest('.k-group').addClass('droppable');
    },
    dragleave: function (e) {
msg('leave');
        $(this.element).closest('.k-group').removeClass('droppable');
    }
  });

});