Как сделать новые сортируемые элементы вложенными и как элементы не исчезают

Question

Новый .container, перетащенный из .new, не является вложенным. Невозможно вставить другой .container / .element в этот. Как сделать это возможным?

В новом .container / .element добавлен элемент стиля с добавлением width:100px; height:30px;. Как сделать их без тега стиля, просто с помощью предоставленных классов?

Первоначальный .container исчезает при выходе за пределы .content div, он работает с новым .container. (этого не происходит с .element divs) Как заставить их вести себя как .element?

Предоставление .new с классом .anchor делает первый удаленный div без тега стиля, все остальные отброшенные остаются с тегом стиля. Это не делает их вложенными.

<div>
  <div class="new container"> </div>
  <div class="new element"> </div>
</div>
<div class="content anchor">
  <div class="container anchor"> 
    <div class="element anchor"> </div>
    <div class="element anchor"> </div>
  </div>
  <div class="container anchor"> </div>
  <div class="container anchor"> </div>
  <div class="element anchor"> </div>
  <div class="element anchor"> </div>
</div>

body
{
    font-family: Arial, Tahoma, San-Serif;
    font-size: 11px;
}
.content{
  background-color:grey;
  padding:20px;
}
.container{
  background-color:rgba(0,0,255,0.2);
  border:1px solid rgba(0,0,255,0.8);
  padding:5px;
  margin:5px;
  min-width:100px;
  min-height:30px;
}
.element{
  background-color:rgba(0,255,0,0.2);
  border:1px solid rgba(0,255,0,0.8);
  margin:5px;
  min-width:100px;
  min-height:30px;
}

$(function() {
    $('.content').sortable({
        connectWith: '.anchor',
        revert:true
    });
    $('.container').sortable({
        connectWith: '.anchor',
        revert:true
    });
    $( ".container, .content" ).disableSelection();

    $( ".new" ).draggable({
      connectToSortable: ".anchor",
      helper: "clone",
      revert: "invalid"
    });
});

Код в jsfiddle: https://jsfiddle.net/Kerubis/zumhs0ng/