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 class="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{
    display:  inline-block;
    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

$(".dock").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);
        $('.dock').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);
        $('.dock').css({opacity: 1.0});
    }
      
  });



  $("#leftArea").kendoDropTarget({ group: "dpGroup", drop: onDrop });
  $("#rightArea").kendoDropTarget({ group: "dpGroup", drop: onDrop });
  $("#topArea").kendoDropTarget({ group: "dpGroup", drop: onDrop });
  $("#bottomArea").kendoDropTarget({ group: "dpGroup", drop: onDrop });

  function onDrop(e) {
      if(e.dropTarget.context.id === "leftArea"){
          e.draggable.element.addClass("dockLeft");
          e.draggable.element.removeClass("dockRight dockTop dockBottom");
      }
      else if(e.dropTarget.context.id === "rightArea"){
          e.draggable.element.addClass("dockRight");
          e.draggable.element.removeClass("dockLeft dockTop dockBottom");
      }
      else if(e.dropTarget.context.id === "topArea"){
          e.draggable.element.addClass("dockTop");
          e.draggable.element.removeClass("dockLeft dockRight dockBottom");
      }
      else if(e.dropTarget.context.id === "bottomArea"){
          e.draggable.element.addClass("dockBottom");
          e.draggable.element.removeClass("dockLeft dockTop dockRight");
      }
      
      
  }