JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="body">

  <div id="docwindow">
    <div id="docwindowheader">
      <header class="windowTop">
        <h1 id="docsHeadTexto">Documents</h1>
        <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
      </header>
    </div>

    <div id="bottomWindowDocs">
      <div class="documents">
        <div id="DOCUMENTO" class="draggable in-box ui-widget-content">
          <img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
          <h1 id="DocEx">Doc-example</h1>
        </div>
      </div>
    </div>
  </div>

</div>

CSS

body {
  height: 500px;
  width: 100%;
  background: #ddf;
}

#janela,
#docwindow,
#BlueWindow {
  position: absolute;
  width: 40%;
  height: 200px;
  left: 100px;
  border: 1px solid black;
}

#docwindowheader,
#BlueWindowheader {
  height: 7%;
  background: rgb(30, 87, 153);
  background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
}

#closeDocs,
#closeBlue {
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 100%;
  top: 4.2%;
  right: 1%;
  z-index: 2;
}

#docsHeadTexto,
#JoanaPTexto {
  color: black;
  text-align: center;
  text-shadow: 3px 2px grey;
  font-size: 95%;
  top: 25%;
}

#DocImg {
  width: 20%;
  height: 20%;
  background-color: none;
  padding: 5px;
}

#bottomWindowDocs {
  background-color: pink;
  height: 80%;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
}

#DocEx {
  position: absolute;
  top: 33%;
  left: 4%;
  font-size: 10px;
  z-index: 6;
}

.draggable {
  position: absolute;
}

.out-of-box {
  background: red;
}

.in-box {
  background: green;
}

JavaScript

$(function() {

  $('#docwindow').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    cursor: 'move',
    greedy: true,
    drop: function(event, ui) {
      if (ui.draggable.hasClass('out-of-box')) {
        ui.draggable.remove();
        console.log("Removing element");
      } else {
        $(ui.draggable).removeClass("out-of-box").addClass("in-box");
        ui.draggable.detach().appendTo($(this));
        console.log("Cloning element");
      }

    }
  });

  $('body').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    cursor: 'move',
    drop: function(event, ui) {
      console.log("Dropping");
      if (ui.draggable.hasClass("in-box")) {
        var clone = ui.draggable.clone();
        clone.removeClass("in-box").addClass("out-of-box");
        clone.detach().appendTo($(this)).draggable({});
        ui.draggable.draggable({
          revert: true
        });
      }
    }
  });

  $("#docwindow, .draggable").draggable({});
  $("#body").draggable({});
});