jQuery UI可排序：如何放入嵌套容器

Question

我具有以下html结构

 <div class="wrapper-all">
     <div class="wrapper-left">
         <div class="row-left">
             <div class="item-left">A</div>
         </div>
         <div class="row-left">
             <div class="item-left">B</div>
         </div>
     </div>
     <div class="wrapper-right">
         <div class="item-right">Firstname</div>
         <div class="item-right">Salutation</div>
     </div>
 </div>

目标是将单个div元素（.item-right）从wrapper-right移到wrapper-left到div容器.row-left中。如果我用鼠标将元素Firstname移到元素A，则应将元素Firstname放到元素a的父元素（.row-left）上。

我尝试了以下方法：

$(".wrapper-right, .wrapper-left").sortable({
  connectWith: ".wrapper-left",
  appendTo: ".row-left"
})  

但是这不起作用。我如何实现目标？