JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

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

JavaScript

var content = [
    {
        text : "node1",
        items: [
            { text: "node1.1" },
            { text: "node1.2" },
            { text: "node1.3" },
            { text: "node1.4" }
        ]
    }
];

var tree = $("#tree").kendoTreeView({
    dataSource : content,
    dragAndDrop: true,
    drag       : function (ev) {
        if (!$(ev.dropTarget).hasClass("k-in k-state-hover")) {
            ev.setStatusClass("k-denied")
        }
    },
    drop       : function (ev) {
        if (ev.sourceNode === ev.destinationNode) {
            console.log("invalid");
            ev.setValid(false);
        }
    }
}).data("kendoTreeView");
tree.expand($(".k-item"));