Обновите DOM при перетаскивании сортируемого элемента
-
20-12-2019 - |
Вопрос
У меня есть список элементов, которые необходимо сортировать, что само по себе несложно реализовать с помощью jQuery.На основе этот код Я поместил эту функциональность в директиву Angular, чтобы моя модель оставалась актуальной при изменении порядка элементов в списке.
Мой список имеет разные цвета строк в зависимости от того, четная это строка или нечетная, а также два символа, которые меняют цвет в зависимости от того, является ли элемент первым или последним в списке.Я создал скрипка, чтобы показать пример.
Проблема в том, что перетаскивание элемента портит макет, и цветные символы не обновляются при перетаскивании элемента.Когда элемент выпущен, список обновляется и снова выглядит красиво.
Мой вопрос:Как поддерживать актуальность списка при перемещении элемента?Я пробовал с change
функцию обратного вызова, но я понятия не имею, как узнать, какую позицию в данный момент занимает мой перетаскиваемый элемент.А ui
-объект не содержит информации об этом, насколько мне известно.При обновлении модели идея заключается в том, что DOM также будет обновляться.Сбросит ли это мое перетаскивание?
Еще я попробовал создать контейнер для текста, чтобы фон не перетаскивался вместе с элементом (это все равно не решает проблему с обновлением цветных символов), но заставить его работать так, как требуется, мне не удалось.
Надеюсь, вы сможете помочь.
Редактировать:После хорошего ночного сна я проснулся и обнаружил ui.placeholder.index()
в change
-event получает текущую позицию перетаскиваемого элемента.Используя это, я могу обновить модель, но стиль при перетаскивании по-прежнему остается беспорядочным.
С наилучшими пожеланиями
Решение
Если кому-то интересно, у меня в итоге получился хак.Я сначала создал фон, а затем добавил элементы в список.Таким образом, фон не изменится при перетаскивании моих предметов.
Что касается обновления моей модели, у меня возникла проблема с change
событие вызывается дважды, поэтому я отказался от этой идеи.
Эта обновленная скрипка показывает мое решение.