Updated Nested draggables with different drop targets

Demonstrates how to nest draggables with different drop targets. As asked on SO: https://stackoverflow.com/questions/56127692/how-to-make-a-draggable-item-from-a-draggable-item

by Sascha

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="larger-drop-target">
  <input type="button" id="toggle-doc-container" value="Toggle Documents" />

  <div id="doc-container" class="ui-widget-header droppable">
    <header class="windowTop">
      <h1 id="docsHeadTexto">Documents</h1>
    </header>

    <div id="draggable" style="left:0;" class="draggable in-box ui-widget-content">
      Doc Example 1
    </div>

    <div id="draggable2" style="left:100px;" class="draggable in-box ui-widget-content">
      Doc Example 2
    </div>

    <div id="draggable4" style="left:200px;" class="draggable in-box ui-widget-content">
      Doc Example 3
    </div>

    <div id="draggable3" style="left:300px;" class="draggable in-box ui-widget-content">
      Doc Example 4
    </div>


  </div>
</div>

CSS

html,
body {
  height: 100%;
  font-family: Arial, sans-serif;
}

#larger-drop-target {
  width: 100%;
  height: 100%;
}

.draggable {
  width: 80px;
  height: 80px;
  padding: 5px;
  position: absolute;
}

#doc-container {
  height: 200px;
}

.in-box {
  background: #FEE;
}

.out-of-box {
  background: #EFE;
}

JavaScript

$(function() {

    $('#toggle-doc-container').on('click', function() {
      $('#doc-container').toggle();
    });

    $('#doc-container').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();
        } 
      }
    });

    $('#larger-drop-target').droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      cursor: 'move',
      drop: function(event, ui) {
        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
          });
        }
      }
    });

    $("#doc-container, .draggable").draggable({});
    $("#larger-drop-target").draggable({});
  });