Javascript 在可排序列表JQuery之间添加可调整大小的元素

我想这是一件非常复杂的事情，但这正是我需要在这里实现的。这几天我一直在苦苦挣扎。 我想要一张可排序的单子。此外，当按下命令键时，我希望使用多个选择，以便可以移动多个li元素。这很有效。但任务还有另一部分。在列表元素之间，我需要一个可调整大小的元素，这是一个li元素，还有一个类“toresize”。但是正如你在我准备的fiddle js中看到的，我在这一部分遇到了很多麻烦。我真的很希望你能帮上忙

---

预期结果：在每两个列表元素之间正好有一个break元素。如果您使用command（ctrl）键抓取两个元素并移动它们，您将看到所选两个元素之间没有预期的空间

 class Ratings {

 setChosenUsersList() {
 $('.users-list.multiple').on('click', 'li', function (e) {
     if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
     } else {
        $(this).addClass("selected").siblings().removeClass('selected');
     }
   });

   $('.users-list.multiple').sortable({
     items: "li",
     revert: 'true',
     update: this.createResizableElements,
     cursorAt: {
       left: 50,
       top: 45
     },
     helper: function (event, item) {
       if (!item.hasClass('selected')) {
         item.addClass('selected').siblings().removeClass('selected');
       }
       const helper = $("<li />");
       const elements = item.parent().children('.selected');
       const cloned = elements.clone();

       helper.append(cloned);
       elements.hide();
       item.data('multidrag', cloned);

       return helper;
     },
     stop: function (event, ui) {
       const cloned = ui.item.data("multidrag");

       ui.item.removeData("multidrag");
       ui.item.after(cloned);
       ui.item.siblings(":hidden").remove();
       ui.item.remove();
     },
   });
 }


 createResizableElements() {
 const sortableList = $('.users-list li');

   if (sortableList.length > 1) {
     $(sortableList).each(function (idx) {
       if (idx < sortableList.length - 1) {
         $(this).after('<li class="to-resize"></li>');
       }
     });
     $('.to-resize').resizable({
       minHeight: 1,
       minWidth: 320,
       maxHeight: 250,
       maxWidth: 320
     });
   }
    } 
}

$(document).ready(function () {
        const ratings = new Ratings();
        ratings.setChosenUsersList();
});

等级评定{
setChosenUsersList（）{
$（'.users list.multiple'）。在（'click'，'li'，函数（e）上{
if（e.ctrlKey | | e.metaKey）{
$（此）.toggleClass（“选定”）；
}否则{
$（this）.addClass（“selected”）.sides（）.removeClass（“selected”）；
}
});
$（'.users list.multiple'）。可排序({
物品：“李”，
回复：“true”，
更新：this.createResizeableElements，
库索拉特：{
左:50,，
top:45
},
助手：函数（事件、项目）{
如果（！item.hasClass（'selected'））{
item.addClass（'selected'）.sides（）.removeClass（'selected'）；
}
const helper=$（“
”）；
常量元素=item.parent（）.children（'.selected'）；
const clone=elements.clone（）；
helper.append（克隆）；
元素。隐藏（）；
数据项（“多重拖动”，克隆）；
返回助手；
},
停止：功能（事件、用户界面）{
const cloned=ui.item.data（“多重拖动”）；
ui.item.removeData（“多重拖动”）；
ui.item.after（克隆）；
ui.item.sides（“：hidden”）.remove（）；
ui.item.remove（）；
},
});
}
CreateResizeableElements（）{
常量sortableList=$（'.users list li'）；
如果（sortableList.length>1）{
$（可排序列表）。每个（函数（idx）{
if（idx
）；
}
});
$（'.to resize'）。可调整大小({
身高:1,，
最小宽度：320，
最大高度：250，
最大宽度：320
});
}
} 
}
$（文档）.ready（函数（）{
常数额定值=新额定值（）；
setChosenUsersList（）；
});

对于多次拖动的问题，是由于

停止

方法造成的。 假设我们在

item1

和

item2

之间拖动

item3

，

item4

在

update

事件中调用

createResizeableElements

后，列表项的状态为

li item1
li resizable1
li item3
li resizable2
li item2
li resizable3
li item4

由于

item4

需要在

item3

之后移动，因此在

stop

方法中，

*item3

和

*item4

被克隆并附加在

item3

之后，原始的

item3

和

item4

被删除，因此列表变为

li item1
li resizable1
li *item3
li *item4
li resizable2
li item2
li resizable3

要解决此问题，只需在

stop

方法的末尾调用

createResizeableElements

，而不是

update

事件。这些更改将应用于此

---

参考：

请指定您发现的问题和预期结果。预期结果：每两个列表元素之间只有一个break元素。如果您使用command（ctrl）键抓取两个元素并移动它们，您将看到所选两个元素之间没有预期的空间。