JQuery UI可拖动，更新DOM

Question

我正在尝试将可拖动项添加到某个区域。这很简单。问题是DOM似乎不是最新的。

https://codepen.io/anon/pen/OxQxJN?editors=0010

问题： - 追加第一个元素，将该元素拖到该区域的底部。 - 附加第二个元素。它位于相对位置，但不会出现在预期的顶部，而是出现在第一个元素 的下方。它就像一个幽灵。

我有什么想法可以让DOM更新，以便附加元素按预期显示？

$('.addWidget').click( (event) => {
  let new_widget = `
    <div class="widget_container draggable" style="height: 130px; width: 260px;">
      <div class="widget">
         <b>Amazing widget</b>
         <p>My cool blah blah blah</p>
      </div>
    </div>`;
  
    $('main').append(new_widget);
    $(".draggable").draggable({
      containment: 'parent',
      snap: true,
      grid: [72, 72]
    });
});

.btn {
  padding: 0.5rem;
  background: #ccc;
}

.btn:hover {
  background: #efefef;
}
.pane_content_dimension_list {
    float:right;
    list-style: none;
    width: 10rem;
}

.pane_content_dimension_list .btn {
    width: 100%;
    margin-bottom: 0.5rem;
}

.page_view {
    background: #f2f2f2;
    border: 1px solid #e2e2e2;
    box-shadow: -1px 1px 4px 2px #aaa;
    box-sizing: border-box;
    height: 792px;
    width: 612px;
}

.page_view main {
    height: 100%;
    margin: 18px;
    width: 100%;
}

.widget_container {
    padding:9px;
}

.widget {
    background: #fff;
    box-shadow: 0 1px 2px 2px #eee;
    color: #939598;
    font-size: 8px;
    height: 100%;
    line-height: 11px;
    padding: 4px;
    width: 100%;
}

<ul class="pane_content_dimension_list">
    <li id="campaign_goals" class="btn addWidget">Campaign Goals</li>
    <li id="flight_dates" class="btn addWidget">Flight Dates</li>
    <li id="key_findings" class="btn addWidget">Key Findings</li>
    <li id="mindsets" class="btn addWidget">Mindsets</li>
    <li id="targeting_notes" class="btn addWidget">Targeting</li>
</ul>
<div class="page_view">
  <main>
  </main>
</div>