JSFiddle - React, Tailwind, and code Playground

Draggable test

by Alex Yu

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<div id="dock">Window</div>
<div class="dockArea">
    <div id="topArea">
        <div class="areaContent">&#8593;</div>
    </div>
    <br>
    <br>
    <br>
    <div id="leftArea">
        <div class="areaContent">&#8592;</div>
    </div>
    <div id="rightArea">
        <div class="areaContent">&#8594;</div>
    </div>
    <br>
    <br>
    <br>
    <div id="bottomArea">
        <div class="areaContent">&#8595;</div>
    </div>
</div>

CSS

/*.dock {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin: 5px;
      background-color:white;
      position:absolute;
      top: 0px;
      left:0px;
  }*/
  .dockLeft {
      top:0px;
      //!important;
      //left:0px !important;
      right:auto;
      bottom:auto;
      height:100%;
      width:50%;
      background-color:grey;
  }
  .dockRight {
      top:0px;
      //!important;
      right:0px !important;
      bottom: auto;
      left: auto;
      height:100%;
      width:50%;
      background-color:grey;
  }
  .dockTop {
      top:0px;
      //!important;
      //left:0px !important;
      bottom:auto;
      right:auto;
      height:50%;
      width:100%;
      background-color:grey;
  }
  .dockBottom {
      top: auto;
      right:auto;
      bottom:0px !important;
      left:0px !important;
      height:50%;
      width:100%;
      background-color:grey;
  }
  #leftArea, #rightArea, #topArea, #bottomArea {
      float:left;
      width: 50px;
      height: 50px;
      border: 2px solid black;
      margin: 5px;
      background-color:orange;
      display:table;
  }
  #topArea, #bottomArea {
      margin-left:50%;
  }
  #leftArea {
      margin-left:45%;
  }
  .dockArea {
      margin-top:20%;
      opacity:0.0;
  }
  .areaContent {
      display:table-cell;
      text-align:center;
      vertical-align:middle;
  }

JavaScript

var mWindow = $("#dock");
mWindow.kendoWindow({
    actions: ["Maximize", "Close"],
    animation: {
        open: {
            effects: "fade:in",
            duration: 500
        },
        close: {
            effects: "fade:out",
            duration: 500
        }
    },
    draggable: true,
    modal: false,
    resizable: true,
    title: "Vehicle Dock",
    width: 400,
    visible: true
}).data("kendoWindow").content('<div id="grid"></div>').center().open();

$('.k-widget.k-window').attr('id', 'dockWindow');
$("#dockWindow").kendoDraggable({
    group: "dpGroup",
    hint: function (element) {
        return element.clone();
    },
    dragstart: function (e) {
        e.currentTarget.hide();
        //$('.dockArea').css('visibility', 'visible');
        $('.dockArea').css({
            opacity: 0.0
        }).animate({
            opacity: 1.0,
            visibility: "visible"
        }, 100);
        $('.k-widget.k-window').css({
            opacity: 0.5
        });
    },
    dragend: function (e) {
        e.currentTarget.show();
        //$('.dockArea').css('visibility', 'hidden');
        $('.dockArea').css({
            opacity: 1.0,
            visibility: "visible"
        }).animate({
            opacity: 0.0
        }, 100);
        $('.k-widget.k-window').css({
            opacity: 1.0
        });
    }

});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
   ...