JSFiddle - React, Tailwind, and code Playground

by victor wang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css">
<div class="container">
        <div class="pin">Fixed</div>
        <div class="a col-head">Col Head 1</div>
        <div class="a col-head">Col Head 2</div>
        <div class="a col-head">Col Head 3</div>
        <div class="a row-head">Row Head 1</div>
        <div class="a grid">1</div>
        <div class="a grid">2</div>
        <div class="a grid">3</div>
        <div class="a row-head">Row Head 2</div>
        <div class="a grid">4</div>
        <div class="a grid">5</div>
        <div class="a grid">6</div>
        <div class="a row-head">Row Head 3</div>
        <div class="a grid">7</div>
        <div class="a grid">8</div>
        <div class="a grid">9</div>
    </div>

CSS

.container {
        width:600px;
        height: 600px;
        /*position:fixed;*/
        /*background:#CCC;*/
        /*padding:10px 0 10px;*/
}
.a,.col-head, .row-head, .pin,.grid {
        float:left;
        /*column-count:4;*/
        /*overflow: auto;*/
        margin:0 10px 10px 0;
        border:1px solid #333;
        /*background:#3E9;*/
        width:128px;
        height:128px;
        font-weight:bold;
        text-align:center;
        line-height:128px;
        /*list-style-type: none;*/
}
.pin {
    background-color: black;
    color: white
}
.row-head {
    background-color: #ED9DC1;
    
}
.col-head {
    background-color: #E1BBF2;
}
.grid {
    background-color: #BBEDD0;
}
.row {
    float:left;
}
.col {
    clear:both;
    width:128px;
    height: 550px;

}
.grid.over {
  border: 2px dashed #000;
}
.placeholder {
    opacity:0.2;
}

JavaScript

var placeholder;
var dragOnRowHead = false;
var dragOnColHead = false;

$(document).ready(function () {
    makeDraggable();
    detect();
    
})
function detect() {
    $(".a").mouseover(function(){  
      if($(this).hasClass("row-head") && (dragOnRowHead ===false)){
        dragOnRowHead = true;
        
        //select grid which has same top
        var s = new Set();
        var arr = new Array(4);
        $(".a").each(function(index,element) {
          if(!s.has($(element).offset().top))
            s.add($(element).offset().top)
        
        });
        var i =0;
        s.forEach(function(item,sameitem,s){
          arr[i] = item; i++;
        });
        function sortNumber(a,b){ return a - b }
        arr.sort(sortNumber);  

        console.log(arr);
        $(".a").each(function(index,element){
          if($(element).offset().top === arr[1]){
            $(element).addClass("tag1");
          }
        });

        $(".a").each(function(index,element){
          if($(element).offset().top === arr[2]){
            $(element).addClass("tag2");
          }
        });

        $(".a").each(function(index,element){
          if($(element).offset().top === arr[3]){
            $(element).addClass("tag3");
          }
        });
        //end of loop function
        //add parent div 
        $(".tag1").wrapAll( "<div class='row'></div>" );
        $(".tag2").wrapAll( "<div class='row'></div>" );
        $(".tag3").wrapAll( "<div class='row'></div>" );
        $(".grid").draggable('disable');
        $(".grid").droppable('disable');
        console.log($("body"));
        makeDraggable();
        
      }

      if($(this).hasClass("grid")) {
        // console.log($(this).offset().left);
        $(".tag1").unwrap();
        $(".tag3").unwrap();
        $(".tag2").unwrap();
        $(".tag2").removeClass("tag2");
        $(".tag1").removeClass("tag1");
        $(".tag3").removeClass("tag3");
        $(".grid").draggable('enable');
       ...