JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<div class="box"></div>

<div class="container"></div>

CSS

.box {
    background: red;   
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 100;
}
.container {
    position: relative;
    top: 150px;
    width: 600px;
    height: 264px;
    margin: 0 auto;
    line-height: 264px;
    text-align: center;
    font-size: 16px;
    color: red;
    border: 2px dashed gray;
}

JavaScript

$('.box').draggable({
  start: function(e,ui) {
    $('body').css({ cursor: 'no-drop' });
  }
});

$('.container').droppable({
    accept: '.box',
    over: function(e,ui) {
       $(ui.draggable).css({ cursor: 'copy' });
    },
    out:function(e,ui) {
       $(ui.draggable).css({ cursor: 'no-drop' });
    },
    activate: function(e,ui) {
       $(this).animate({ borderColor: 'red' }).text('Drop me here!');
    },
    deactivate: function(e,ui) {
       $(this).animate({ borderColor: 'gray' }).text('');
    }
});