JQuery UI draggable: переупорядочивать динамически созданные элементы, как элементы списка Draggable - PullRequest
0 голосов
/ 09 октября 2019

У меня есть перетаскиваемый список пользовательского интерфейса, и я могу создавать динамически перетаскиваемые элементы, нажимая кнопку «+ Добавить новый».

Что я ожидаю : Если я переупорядочиваю 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

Ожидается:

enter image description here

...