Question

我想这是一件非常复杂的事情，但这就是我需要在这里实现的。我现在正在努力这几天。我想要一个可排序的列表。另外，当按下命令键时，我想使用多个选择，因此我可以移动多个li元素。而且效果很好。但是还有另一部分任务。在列表元素之间，我需要有一个可调整大小的元素，这也是一个li元素，以及一个类“ to-resize”。但是正如您在小提琴js中看到的那样，我准备的那部分遇到了很多麻烦。我确实希望您能为那个家伙提供帮助。

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

预期结果：每两个列表元素之间只有一个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();
});

Answer 1

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

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

要解决此问题，只需在createResizableElements方法末尾调用stop而不是update事件。所做的更改将应用在此JSFiddle中。

参考：jQuery Sortable Widget

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

1 个答案: