Переміщувані елементи, які під час перетягування розсувають інші елементи, Javascript
Наприклад, натиснути на елемент, утримувати кнопку миші, перетягнути елемент, утримуючи його кнопкою миші, а потім помістити його у потрібному місці, відпустивши кнопку миші. Або їхні сенсорні аналоги. На щастя, це вже добре освоєна територія.
Але тепер настав час експериментів, на зразок JQuery UI пропонованого Draggable (та інших подібних методів), щоб робити це ще простіше.
Останнім часом я помітив, що намагаючись зробити певну дію (дивіться заголовок цієї статті), я не можу зробити це за допомогою JQuery UI . Але я зміг зробити це якось.
Я намагався відтворити ефект, як у бічній панелі Keynote, де можна перетягувати елементи, щоб міняти місцями слайди.
Ось як виглядає цей ефект:
Ви можете отримати щось дуже близьке до цього, використовуючи деякі елементи базової конфігурації JQuery UI . Ми використовуємо тут метод Сортування.
Він призначений спеціально для сортування списків, тому що нам потрібно. Тобто він використовує щось схоже і на перетягування, і на відпускання одночасно.
І базовий HTML на кшталт цього:
"Заповнювач" у конфігурації є елементом (це досягається за допомогою введення імені класу), який вставляється між слайдами. Слайд, який ми переміщаємо "кидається", якщо ви відпускаєте кнопку миші.
Ви можете встановити його стиль на свій розсуд за допомогою CSS. Я зробив його схожим на прямокутник з блакитною смугою зліва, як у Keynote:
Проблема полягає в тому, щоб «розштовхати з дороги» інші слайди там, де ми хочемо помістити елемент. І тут з'явився наш слайд.
Спершу я намагався вирішити цю проблему зза допомогою анімації @keyframes , збільшуючи висоту заповнювача від 0 до висоти слайда, а потім вивести в цьому місці елемент за допомогою режиму заповнення.
Це працює для встановлення заповнювача на новому місці, але JQuery UI просто вириває заповнювач із DOM , коли він забирається зі старого місця, що не дозволяє здійснювати переміщення плавно.
Таким чином, потрібна додаткова обробка. На щастя, Ейджей Кенді знайшов зручний спосіб зробити саме те, що мені потрібно.
Слідкуйте за моєю думкою, з цього моменту все буде трохи складніше:
- Запускаємо цикл через усі слайди;
- Створюємо дублікат кожного слайду;
- Маємо дублікат прямо поверх оригіналу;
- Приховуємо оригінал;
- Зберігаємо посилання на слайд, дублікат якого був розміщений.
Після цього запускаємо метод сортування для всіх оригінальних слайдів.
І потім, коли ви починаєте перетягувати слайд:
- Приховуємо усі оригінальні слайди;
- Виводимо дублікати слайдів;
- При перетягуванні потрібного слайду приховані оригінальні елементи переставляються невидимо;
- Після того, як перестановка здійснилася, дублікати слайдів виводяться на позиціях відповідних оригінальних слайдів.
Коли перетягування завершилося, потрібно:
- Переконатись, що всі дублікати розставлені у правильному порядку;
- Змінити видимість елементів та знову вивести оригінальні слайди, але вже в новому порядку.
Потрібно було чимало часу, щоб продумати, як це все зробити, і отримати саме той код, який потрібен.
У цьому прикладі я використовував для номерів слайдів псевдо-елементи, тому цей блок теж повинен бути включений в код. Ось як виглядає все разом:
Ось демоверсія.
Бонусна функція : слайдам призначено клас, з допомогою якого, коли елементи переміщаються, миготять, як у Keynote .
Девід ДеСандро розробляв кілька проектів, пов'язаних, з панелями з елементами, що переміщуються. Про деякі з них ви, можливо, чули, наприклад Masonry або Isotope .
У нього також є один проект, який називається Packery. Він використовує алгоритм для пакування панелей. Використовуючи його елементи та елементи іншого проекту, Dragabilly , ви можете створити такий же ефект, коли елемент, що перетягується, розсуває інші елементи. Для одновимірних панелей чудово підходить наша демо-версія.
Девід удосконалив мою демо-версію так, що вона може працювати і для подвійної панелі. А також зміг оптимізувати код, який тепер поменшав.
Переглянути результат на Codepen.
Переклад статті "Draggable Elements That Push Other Of Of Way" був підготовлений дружною командою проекту Сайтобудування від А до Я.