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 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>
</ul>

<ul class='k-group dropsite'>
<span class='group-header'>Drop site</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 }

JavaScript

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

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

  $('.demo-items ul.dropsite').kendoDropTarget({
    drop: function (e) { msg('ul drop');
       this.element.append(e.draggable.currentTarget)
       .closest('.k-group').removeClass('droppable')
    },
      dragenter: function (e) { msg('ul enter');
        $(this.element).closest('.k-group').addClass('droppable');
    },
    dragleave: function (e) { msg('ul leave');
        $(this.element).closest('.k-group').removeClass('droppable');
    }
  });
    */
  $('ul.dropsite, li.k-button').kendoDropTarget({
    drop: function (e) { msg(e.draggable.currentTarget[0].nodeName + ' dropped on ' + this.element[0].nodeName);
            var $source = e.draggable.currentTarget;
            var $destination = this.element;
            var $bag = $destination.children('ul');
                         
            if ($bag.length > 0) {
                $bag.append($source);
            } else {
                $bag = $('<ul/>');
                $destination.append($bag).append($source);
            }

       this.element.closest('.k-group').removeClass('droppable')
    },
      dragenter: function (e) { msg(this.element[0].nodeName+' enter');
        $(this.element).closest('.k-group').addClass('droppable');
    },
    dragleave: function (e) { msg(this.element[0].nodeName+' leave');
        $(this.element).closest('.k-group').removeClass('droppable');
    }
  });

});