JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>


    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="grid1"></div>
    <br /><br /><br />
    <div id="grid2"></div>
    
  </body>
</html>

CSS

.hint {
  padding: 7px 10px;
  background-color: #FFFFFF;
 }

JavaScript

var data = [
            { id: 1, text: "text 1", position: 0 },
            { id: 2, text: "text 2", position: 1 },
            { id: 3, text: "text 3", position: 2 }
        ]
        
    var data2 = [
            { id: 4, text: "", position: 0 },
            { id: 5, text: "", position: 1 },
            { id: 6, text: "", position: 2 }
        ]

        var dataSource = new kendo.data.DataSource({
            data: data,        
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number" },
                        text: { type: "string" },
                        position: { type: "number" }
                    }
                }
            }
        });
        
        var dataSource2 = new kendo.data.DataSource({
            data: data2,        
            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"]            
        }).data("kendoGrid");
        
        var grid2 = $("#grid2").kendoGrid({
            dataSource: dataSource2,  
            scrollable: false,    
            columns: ["id", "text"]            
        }).data("kendoGrid");

        grid.table.kendoDraggable({
            filter: "tbody > tr",
            group: "gridGroup",
            threshold: 100,
            hint: function(e) {
                var dataItem = grid.dataItem(e);
                return $('<div class="hint">' + dataItem.text + '</div>').css({ marginLeft: e.clientX, marginTop: e.clientY });
            }
        });
       
        
       ...