JSFiddle - React, Tailwind, and code Playground

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="grid"></div>

JavaScript

var data = [
    { id: 1, text: "David ", Sequnce: 0 },
    { id: 2, text: "Mark  ", Sequnce: 1 }
]

var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    Sequnce: { type: "number" }
                }
            }
        }
    });

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,  
    scrollable: false,    
    columns: ["id", "text", "Sequnce"]            
}).data("kendoGrid");

grid.table.kendoDraggable({
    filter: "tbody > tr",
    group: "gridGroup",
    hint: function(e) {
        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
    }
});

grid.table/*.find("tbody > tr")*/.kendoDropTarget({
    group: "gridGroup",
    drop: function(e) {        
        var target = dataSource.get($(e.draggable.currentTarget).data("id")),
            dest = $(e.target);
        
        if (dest.is("th")) {
            return;
        }       
        dest = dataSource.get(dest.parent().data("id"));

        //not on same item
        if (target.get("id") !== dest.get("id")) {
            //reorder the items
            var tmp = target.get("Sequnce");
            target.set("Sequnce", dest.get("Sequnce"));
            dest.set("Sequnce", tmp);
            
            dataSource.sort({ field: "Sequnce", dir: "asc" });
        }                
    }
});