У меня есть перетаскиваемый список пользовательского интерфейса, и я могу создавать динамически перетаскиваемые элементы, нажимая кнопку «+ Добавить новый».
Что я ожидаю : Если я переупорядочиваю Item 1, Item 2, Item 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>
Рабочая копия
![enter image description here](https://i.stack.imgur.com/CcsGx.png)
Ожидается:
![enter image description here](https://i.stack.imgur.com/EoUs0.png)