jquery-ui - Jquery-ui ドロップ時に div を追加し、追加された div をドロップ可能 (ネスト) にする

Question

1 つの要素をドラッグする必要があり、ドロップ中に新しい html div コンテナーを追加し、追加された html div コンテナーをドロップ可能 (ネスト) にする必要があります。ここにフィドルファイルを添付しました。誰でもこれについて助けることができますか?

$('.dragItem').draggable({
  helper: 'clone',
  connectToSortable: "#column2,#column2 div"
});

$('.dragItem').sortable({
  containment: "parent"
});

$('#column2').sortable({
  placeholder: "highlight"
});

$('#column2').droppable({
  accept: '.dragItem',
  drop: function(event, ui) {
    var draggable = ui.draggable;

    var droppable = $(this);
    var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
    drag.appendTo(column2); 
    drag.sortable({
      placeholder: "highlight"
    });
    drag.droppable({
      accept: ".dragItem",
      drop: function (event, ui) {
        var draggable = ui.draggable;
        var droppable = $(this);
        var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
      }
    })
    drag.css({width:'', height: ''})
  }
});`

JSフィドル