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">

  <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 ui-widget-content">
      Doc Example
    </div>

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

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

    <div id="draggable3" style="left:300px;" class="draggable ui-widget-content">
      Doc Example
    </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;
}

.ui-draggable,
.ui-droppable {
  background-position: top;
}

.in-box {
  background: #FEE;
}

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

JavaScript

$(function() {

    $('#doc-container').droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      cursor: 'move',
      greedy: true,
      drop: function(event, ui) {
        console.log(ui);
        $(ui.draggable).removeClass("out-of-box").addClass("in-box");
        ui.draggable.detach().appendTo($(this));
      }
    });

    $('#larger-drop-target').droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      cursor: 'move',
      drop: function(event, ui) {
        console.log("Dropping", ui);
        $(ui.draggable).removeClass("in-box").addClass("out-of-box");
        ui.draggable.detach().appendTo($(this));
      }
    });

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