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

Question

我想这是一件相当复杂的事情，但这是我需要在这里实现的。我现在正在为此苦苦挣扎几天。我想要一个可排序的列表。此外，当按下命令键时，我想使用多项选择，这样我就可以移动不止一个 li 元素。这很有效。但是还有另一部分任务。在列表元素之间我需要有一个可调整大小的元素，这是一个 li 元素以及 class 'to-resize'。但是正如您在我准备的 fiddle js 中看到的那样，我在那部分遇到了很多麻烦。我真的希望你能帮助那些人。

https://jsfiddle.net/xpvt214o/886030/

预期结果：每两个列表元素之间正好有一个break元素。如果您使用 command(ctrl) 键抓住两个元素并移动它们，那么您会看到所选择的两个元素之间没有预期的 space。

 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();
});

Answer 1

多次拖动的问题，是stop方法的问题。假设我们在item1和item2之间拖动item3、item4 在 update 事件中调用 createResizableElements 后，列表项状态为

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方法的末尾调用createResizableElements而不是update事件。更改应用于此 JSFiddle。

参考：jQuery Sortable Widget

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

Adding resizable element in between sortable list JQuery

javascript

jquery

jquery-ui-sortable