JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var data = [
    { id: 1, text: "text 1", position: 0 },
    { id: 2, text: "text 2", position: 1 },
    { id: 3, text: "text 3", position: 2 },
    { id: 4, text: "text 4", position: 40 },
    { id: 5, text: "text 5", position: 100 },
    { id: 6, text: "text 6", position: 600 },
    { id: 7, text: "text 7", position: 47000 },
    { id: 8, text: "text 8", position: 99999 },
    { id: 9, text: "text 9", position: 1000000 }];

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

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

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

grid.table.kendoDropTargetArea({
    group: "gridGroup",
    filter: "tbody > tr",
    drop: function (e) {
        var target = grid.dataItem(e.draggable.currentTarget);
        var dest = grid.dataItem(e.dropTarget);
        //not on same item
        if (target.id !== dest.id) {
            //reorder the items
            var tmp = target.get("position");
            target.set("position", dest.get("position"));
            dest.set("position", tmp);
            
            //Lets mark the changes as dirty
            target.dirty = true;
            dest.dirty = true;
            
            grid.dataSource.sort({ field: "position", dir: "asc" });
        }
    }
});