JSFiddle - React, Tailwind, and code Playground

by Aleksey Pshenichnov

HTML

<div class='main_droppable_area'>
  <div class='drop_area north invisible'></div>
  <div class='drop_area east invisible'></div>
  <div class='drop_area south invisible'></div>
  <div class='drop_area west invisible'></div>
</div>
<div class='draggable_area'></div>

CSS

.main_droppable_area {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  height: 200px;
  border: 1px dashed blue;
}
.drop_area {
  position: absolute;
  border: 1px dashed blue;
  background-color: #eff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.drop_area.active {
  opacity: 1;
  filter: alpha(opacity=100);
}
.drop_area.north {
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.south {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.west {
  top: 50px;
  left: 0px;
  bottom: 50px;
  width: 50px;
}
.drop_area.east {
  top: 50px;
  right: 0px;
  bottom: 50px;
  width: 50px;
}
.draggable_area {
  position: absolute;
  top: 300px;
  left: 50px;
  background-color: blue;
  width: 50px;
  height: 50px;
}
.invisible {
  visibility: hidden;
}

JavaScript

$(document).ready(function() {
  $('.draggable_area').draggable();

  $('.main_droppable_area').droppable({
    accept: '.draggable_area',
    over: function() {
      console.log('main_droppable_area - over');
      $('.drop_area').removeClass("invisible");
    },
    out: function() {
      console.log('main_droppable_area - out');
      $('.drop_area').addClass("invisible");
    }
  });

  $('.drop_area').droppable({
    activate: function() {
      console.log("activated");
    },
    accept: '.draggable_area',
    over: function() {
      $(this).addClass('active');
      console.log('drop_area - over');
    },
    out: function() {
      $(this).removeClass('active');
      console.log('drop_area - out');
    }
  });
});