JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<div id="nonWorking">
    <h3>Doesn't Work</h3>
    <ul id="dragItems" class="dragSrc">
    </ul>
</div>

<div id="working">
    <h3>Works!</h3>
    <ul id="dragItems2" class="dragSrc">
    </ul>
</div>

<div class="dropTarget">
    drop target 1
</div>

<div class="dropTarget">
    drop target 2
</div>

CSS

h3 {
    border-bottom: solid black 1px;
}

div {
    width:150px;
    height:200px;
    float:left;    
}

#nonWorking {
    border-right: solid black 1px;
}

li{
    cursor:move;
}

.dropTarget {
    /*display:none;*/
    border: solid black 1px;
}

.dropAllowed{
    background-color:green;
}

JavaScript

$(function() {
    var availableData = new kendo.data.DataSource({
        data: [{ name: "test 1"},
               { name: "test 2"}]
    });

    var listViewOptions = {
        template: "<li data-id='${uid}'>${name}</li>",
        dataSource: availableData
    };


    var listView1 = $("#dragItems").kendoListView(listViewOptions).data("kendoListView");
    var listView2 = $("#dragItems2").kendoListView(listViewOptions).data("kendoListView");

    var draggableOptions = {
        filter: "li",
        hint: function(e) {
            return $('<div class="">' + e.html() + '</div>');
        },
        dragend: draggableOnDragEnd,
        dragstart: draggableOnDragStart
    };

    listView1.element.kendoDraggable(draggableOptions);

    var updatedOptions = $.extend(draggableOptions, {
        cursorOffset: { top: 10, left: 10 }
    });
    
    listView2.element.kendoDraggable(updatedOptions);

    $(".dropTarget").kendoDropTarget({
        dragenter: onTargetDragEnter,
        dragleave: onTargetDragLeave,
        drop: onTargetDropped
    });

    function draggableOnDragStart(e) {
        // $(".dropTarget").show();
    }

    function draggableOnDragEnd(e) {
        cleanUpDropTargets();
    }

    function onTargetDragLeave(e) {
        //$(e.target).removeClass("dropAllowed");
        $(e.sender.element).removeClass("dropAllowed");
    }

    function onTargetDragEnter(e) {
        //$(e.target).addClass("dropAllowed");
        $(e.target).addClass("dropAllowed");
    }

    function onTargetDropped(e) {

        var $dropTarget = $(e.target);

        /*get uid from data source*/
        var uid = e.draggable.currentTarget.data('id');
        var item = e.draggable.element.data().kendoListView.dataSource.getByUid(uid);

        cleanUpDropTargets();

        $dropTarget.text(item.name);
    }

    function cleanUpDropTargets() {
        $(".dropTarget").removeClass("dropAllowed"); //.hide();
    }

});