jQuery UI draggable：对动态创建的元素进行重新排序，例如Draggable列表项

Question

我有UI可拖动列表，我可以通过单击“ +添加新”按钮来创建动态可拖动项目。

期望的结果：如果我根据此顺序从可拖动列表中重新排列项目1，项目2，项目3 ... 元素，重新排序我容器列表项也应该重新排序

$(function() {
  $( "#rpSortable" ).sortable();
});

$(document).on('click', '#addNew', function(){
  var currentItems = $('ul#rpSortable li').length;
  $('<li class="ui-state-default" rp-remove-item="rp-item-'+(currentItems + 1)+'">Item '+ (currentItems + 1) +' <a href="javascript:;" class="closeSortableItem">Delete</a></li>').appendTo('ul#rpSortable');
  $('<div class="addedItem desc-1" id="rp-item-'+(currentItems + 1)+'"> '+ (currentItems + 1) +'</div>').appendTo('.rpContainer');
});

$(document).on('click', '.closeSortableItem', function(){
  //debugger;
  var myAttr = $(this).closest('li').attr('rp-remove-item');		
  $('#'+myAttr).remove();
  $(this).closest('li').remove();
});

body{font-family:verdana;font-size:14px;}
.rpContainer { padding:20px; background-color:#efefef;border:1px solid #ddd;}
.closeSortableItem{text-align:right;float: right;font-size: 12px;color: red;}
.addedItem{padding:5px;background-color:#ffffff;margin-bottom:5px;}

ul#rpSortable{margin:30px 0 10px 0;padding:0;list-style:none;}
ul#rpSortable li{margin:0;padding:5px;list-style:none;}
h3{margin:0 0 10px;padding:0;font-size:14px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>

<div class="rpContainer">
  <h3>Re-order me</h3>
  <div class="addedItem desc-1" id="rp-item-1">1</div>
</div>


<ul id="rpSortable">
  <li class="ui-state-default" rp-remove-item="rp-item-1">Item 1</li>
</ul>


<a href="javascript:;" id="addNew">+ Add</a>

  

工作副本

  

预期：