JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

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

<div id="dt1">DropTarget 1</div>
<div id="dt2">DropTarget 2</div>

CSS

span.normal {
    background-color: #00b050
}

span.warning {
    background-color: #c00000
}

span.allowed {
    background-color: #ffc000
}

div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

div#d1 {   
    height: 50px;
}

JavaScript

$("#d1").kendoDraggable({
    hint: function(target) { return $("<span class='normal'>Dragging</span>") }
});

$("#dt1").kendoDropTarget({
    dragenter: function(e) {
        changeStyle(e.draggable.hint, "normal", "allowed");
    },
    dragleave: function(e) {
        changeStyle(e.draggable.hint, "allowed", "normal");
    }  
});

$("#dt2").kendoDropTarget({
    dragenter: function(e) {
        changeStyle(e.draggable.hint, "normal", "warning");
    },
    dragleave: function(e) {
        changeStyle(e.draggable.hint, "warning", "normal");
    }  
});


function changeStyle(element, current, next) {
    element.removeClass(current).addClass(next);
}