Добавление изменяемого размера элемента между сортируемым списком JQuery - PullRequest
Новая
       34

Добавление изменяемого размера элемента между сортируемым списком JQuery

0 голосов
/ 16 октября 2018

Я думаю, это довольно сложная вещь, но это то, чего мне нужно достичь здесь.Я борюсь с этим пару дней.Я хотел бы иметь список, который можно сортировать.Также, когда нажата командная клавиша, я хотел бы использовать множественный выбор, чтобы я мог перемещать более одного элемента li.И это работает довольно хорошо.Но есть и другая часть задачи.Между элементами списка мне нужно иметь элемент изменяемого размера, это также элемент li с классом «to-resize».Но, как вы можете видеть на скрипке, которую я подготовил, я столкнулся с множеством проблем с этой частью.Я действительно надеюсь, что вы можете помочь с этим, ребята.

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

Ожидаемый результат: иметь ровно один элемент разрыва между каждыми двумя элементами списка.Если вы возьмете два элемента с помощью клавиши 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();
});

1 Ответ

0 голосов
/ 17 октября 2018

Для проблемы при многократном перетаскивании это связано с методом 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

...