Пользовательский интерфейс jQuery: удаление класса в событии изменения (плагин nestedSortable) - PullRequest
Новая
       22

Пользовательский интерфейс jQuery: удаление класса в событии изменения (плагин nestedSortable)

3 голосов
/ 08 декабря 2011

Я использую nestedSortable Мануэли Сарфатти (http://mjsarfatti.com/sandbox/nestedSortable/), чтобы создать хранимый и вложенный список. Я продвинул сценарий на один шаг вперед, сделав свой список свертываемым с помощью дополнительного jQuery (я не изменял оригиналскрипт плагина.) Я хотел, чтобы значки со стрелками открытия и закрытия отображались в элементах списка, чтобы указать, когда они находятся в свернутом и развернутом состоянии. У меня это почти работает, за исключением того, что я не могу удалить значок стрелки, когда у родителя больше нет детейЧтобы создать значок стрелки, я добавляю класс ArrowOpen к любому родителю, у которого есть дочерние элементы, и использую событие изменения пользовательского интерфейса jQuery, чтобы удалить все экземпляры класса, а затем повторно применяю класс каждый раз, когда список сортируется (или изменяетсяНапример: 

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

Вот мой рабочий пример jsfiddle: http://jsfiddle.net/qbxWd/

Чтобы повторить мою проблему, попробуйте это: Перетащите / вложите Item-2в Item-1, и вы увидите, что Item-1 получит класс ArrowOpen и отобразит значок открытой стрелки. Теперь переместите Item-2 обратно в корневой файл.vel, и вы увидите, что Item-1 продолжает сохранять класс ArrowOpen, а значок открытой стрелки по-прежнему присутствует.Если этот сценарий работал должным образом, когда Item-2 был перемещен обратно в корень, Item-1 должен был потерять значок стрелки.

Если у кого-то есть какие-либо предложения, любая помощь будет приветствоваться - спасибо!

Редактировать: В полном раскрытии я отправил это на форум поддержки плагина ранее на этой неделе: http://bit.ly/uXbfZY

1 Ответ

1 голос
/ 08 декабря 2011

в функции остановки добавить это 

$("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen");

в качестве первой строки и удалите 

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

из функции изменения

ПРИМЕЧАНИЕ:

  • что это всего лишь обходной путь и что стрелки исчезают при перетаскивании элементов, а когда вы их бросаете, стрелки появляются там, где и должны.

  • функция "change" вызывается несколько раз, если я прав, каждый раз, когда вы перетаскиваете ее из одного элемента в другой, не отпуская.

Надеюсь, это поможет!

Скрипка http://jsfiddle.net/envy/qbxWd/5/

EDIT

еще лучший подход, добавить следующие две строки в качестве первых строк в функции "stop" 

            $("ul.sortable li").removeClass("ArrowOpen");  
            $("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen");

и удалите все из функции «change», это даст желаемый эффект и не будет вызывать «removeClass» каждый раз, когда вы перемещаете элемент, не отпуская его.

EDIT2

Если вы хотите, чтобы он работал со многими вложенными сортируемыми объектами, я предлагаю другой вариант, который использует рекурсивную функцию для применения «ArrowOpen» ко всем li, имеющим ul с child li.

Демонстрация скрипки

EDIT3 Вы можете сделать этот шаг еще дальше, избегая того, чтобы свернутые узлы теряли свой класс. Добавить not ('. Collapsed') в оператор добавления класса. например,

$ ("ul.sortable li: has (ul): has (li)> div> a: not (.ArrowOpen-closed)"). AddClass ('ArrowOpen');

...