Запам’ятати порядок сортування jQuery UI Sortable
Запам'ятати порядок сортування jQuery UI Sortable
У сервісі Google «Питання та відповіді» одним користувачем було поставлене це питання і, на мій подив, дуже довго ніхто не давав на нього відповіді. А насправді це завдання дуже просто вирішується завдяки вбудованому методу serialize.
Зараз я хочу розібрати лише основну функцію програми:
Зберігаємо посилання на кореневий елемент сортованого списку. Він неодноразово буде потрібний нам надалі. Хоча ця функція працює дуже швидко, але так отримати доступ можна буде ще швидше.
Призначаємо всі елементи списку унікальні ідентифікатори. Це обов'язкова умова правильної роботи методу serialize. Префікс може бути довільним, але в наших інтересах, щоб він був якомога коротшим. Як роздільник можна використовувати символи підкреслення, рівність або дефіс.
Ініціалізуємо віджетSortable і перехоплюємо подію update, щоб зберігати стан списку.
Відновлюйте порядок елементів списку після завантаження сторінки.
Пробігаємось по всіх елементах, збережених у cookie, та переміщуємо їх у кінець списку. Якщо було збережено порядок всім елементів, всі вони природним чином займуть свої місця. Якщо для якихось елементів позиція не зберігалася, то вони спливуть нагору списку.
Окремо хочу зауважити, що в цьому прикладі замість штатного API для доступу до cookies використовувався плагін, який значно полегшив роботу з ними.
Ще замітки зі схожою тематикою
Коментарі до нотатки
А можна дізнатися як зробити так, щоб це записати не в cookie, а в базі даних в mysql?
В обробнику події update зробіть щось на кшталт:
насервер по URL/sortable/save пишете код, який розбирає вміст параметра sortable і записує ці дані в базу. У запиті також потрібно враховувати значення параметра timestamp. Через те, що запити на сервері можуть надходити у випадковому порядку, потрібно відкидати «старі», у яких значення timestamp буде менше, ніж вже записане в базу.
Також рекомендую прочитати статтю про контроль швидкості виклику функцій. Можливо, потрібно обмежити кількість запитів, що надсилаються в одиницю часу, щоб не перевантажувати сервер.
Було б зрозуміліше якби був весь код сторінки!
і щодо порядку (точніше його відновлення) — якщо після перезавантаження нові елементи будуть не в кінці списку, а впереміш зі старими — це не спрацює звичайно. (У моєму випадку, втім, у цьому немає необхідності)
підкажіть, як зробити правильно, якщо хочу використовувати не ідентифікатор елемента, а інший атрибут, наприклад, order. Як привласнити цей атрибут і його значення до елемента мені зрозуміло, але як записати в куки?
Додав деякі зміни, щоб позиції зберігалися на певній сторінці.
Хотів так само дізнатися при рух елемента можна змінити властивість елемента, наприклад присвоїти тінь. Одним словом потрібно змінити css властивість елемента.
Звичайно можна. Як мінімум, у елемента, який тягнуть зараз, з'являється клас ui-sortable-helper . Також віджет генеруватиме різні події. На них можна повісити обробники з якоюсь складнішою логікою. Читайте документацію.