JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<div align="center"><h1>Die HTML5 Drag & Drop API</h1></div>
<div class="box">
    <header>Box A</header>
</div>
<div class="box">
    <header>Box B</header>
</div>

CSS

.box
{
    width: 150px;
    height: 200px;
    border-style: solid;
    border-width: 1px;
    background-color: greenyellow;
    margin: 20px;
    padding: 0px;
    float: left;
}
.box header
{
    background-color: royalblue;
    cursor: move;
}
.box:hover
{
    border-style: dashed;
}

JavaScript

$(function() {
  $('.box').draggable({
    helper: 'clone',
    opacity: 0.5,
    revert: 'invalid',
    handle: 'header'
  }).droppable({
    over: function() {
      $(this).fadeTo(300, 0.5);
    },
    out: function() {
      $(this).fadeTo(300, 1);
    },
    drop: function(ev, ui) {
      var placeHolder=$('<span>');
      ui.draggable.after(placeHolder);
      $(this).fadeTo(300, 1).after(ui.draggable);
      placeHolder.replaceWith(this);
    }
  });
});