JSFiddle - React, Tailwind, and code Playground

by Dilip Prajapati

HTML

<div class="ccarrow">
  <div class="ccarcell" id="1_1"></div>
  <div class="ccarcell" id="1_2"></div>
  <div class="ccarcell" id="1_3"></div>
  <div class="ccarcellbook" style="width:110px;">CAR1</div>
  <div class="ccarcell" id="1_7"></div>
</div>
<div class="ccarrow">
  <div class="ccarcell" id="2_1"></div>
  <div class="ccarcell" id="2_2"></div>
  <div class="ccarcell" id="2_3"></div>
  <div class="ccarcellbook">CAR2</div>
  <div class="ccarcell" id="2_5"></div>
  <div class="ccarcell" id="2_6"></div>
  <div class="ccarcell" id="2_7"></div>
</div>

CSS

.ccarrow {
  width: 350px;
  height: 28px;
  padding-left: 2px;
  margin-bottom: 2px;
}

.ccarcell {
  width: 38px;
  height: 28px;
  float: left;
  cursor: hand;
  cursor: pointer;
  border-left: #FC6 1px dotted;
  background-color: #fff;
}

.ccarcellbook {
  height: 28px;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  float: left;
  cursor: hand;
  cursor: pointer;
  background-color: #ff0000;
}

JavaScript

$('.ccarcellbook').draggable({
  helper: 'clone',
  cursor: 'move',
  snap: '.ccarcell',
  snapMode: 'inner'
});
$('.ccarcell').droppable({
  over: function(event, ui) {
    var $this = $(this);
  },
  drop: function(event, ui) {
    alert($(this).attr('id'))
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.appendTo(droppable);
    draggable.css({
      top: '0px',
      left: '0px'
    });
  }
});