JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
    <div id="grid"></div>
    <table id="target" class="k-widget k-grid">
      <thead>
        <tr>
          <th class="k-header" colspan="2">Drop inside red area</th>
        </tr>
      </thead>
    </table>

CSS

#grid {
  width: 200px;
}

#target {
  min-width: 200px;
  border: 1px solid red;
}

JavaScript

var dataSource = new kendo.data.DataSource({
  data: [{
    "ID": 1,
      "Nom": "John"
  }, {
    "ID": 2,
      "Nom": "Jane"
  }, {
    "ID": 3,
      "Nom": "Sam"
  }, {
    "ID": 4,
      "Nom": "Charles"
  }, {
    "ID": 5,
      "Nom": "Paul"
  }, {
    "ID": 6,
      "Nom": "Josh"
  }, {
    "ID": 7,
      "Nom": "Daniel"
  }],
  pageSize: 8
});

var grid = $("#grid").kendoGrid({
  dataSource: dataSource,
  columns: [{
    field: "ID"
  }, {
    field: "Nom"
  }]
}).data("kendoGrid");

$("tr", grid.tbody).kendoDraggable({
  hint: function (e) {
    item = $('<div class="k-grid k-widget" style="background-color: lightblue; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
    return item;
  }
});

$("#target").kendoDropTarget({
  drop: function (e) {
    e.dropTarget.append($(e.draggable.currentTarget).clone());
  }
});