ВИКОРИСТАННЯ ТЕХНОЛОГІЇ DRAG-AND-DROP ПРИ СТВОРЕННІ ВЕБ-ІНТЕРФЕЙСУ

Анотація

Розвиток інтернет середовища та вплив зовнішніх факторів стало поштовхом для стрімкого зростання кількості користувачів інтернет простору. Це призводить до конкуренції між веб-ресурсами, критеріями оцінки яких є інформаційне забезпечення, зручність пошуку та інші.   

Ефективність будь-якого сайту в значній мірі залежить від його інтерфейсу. Сукупність засобів, за допомогою яких користувач взаємодіє з веб-ресурсом, безпосередньо впливають на те, наскільки швидко та легко відвідувач вирішить поставлені перед собою завдання та чи захоче повернутись на сайт. Основними вимогами до веб-інтерфейсів є простота та зручність. Тому важливо логічно структурувати, правильно впорядкування всі його елементи та визначити найоптимальніший спосіб взаємодії з ними.

Одну із можливостей вирішити таке завдання дає застосування drag-and-drop. Захоплення елемента мишкою і його перенесення візуально спростять, наприклад, копіювання та переміщення документів (як в файлових менеджерах); оформлення замовлення («покласти в кошик»). Цей метод є базовим для розробки багатьох ігор, тестових завдань, перевпорядкування графічних елементів, сортування списків.

Сучасні веб-технології мають різні засоби для реалізації drag-and-drop. Найчастіше це нативний JavaScript, HTML5 та бібліотеки JavaScript. Для веб-розробника є актуальним питання вибору із цієї сукупності однієї технології чи їх поєднання для найбільш ефективної реалізації проекту. Адже від грамотного вибору засобів створення залежить швидкість розробки, її вартість та якість.

В роботі розглянуто можливості мови JavaScript щодо створення веб-інтерфейсу з елементами drag-and-drop та встановлення найбільш ефективного засобу drag-and-drop інтерфейсу. Розглянуто перетягування елементів за допомогою нативного JavaScript, зв’язки HTML5 & JavaScript, JavaScript-бібліотек, що дало можливість узагальнити та систематизувати отримані результати для визначення найбільш ефективних засобів реалізації drag-and-drop інтерфейсу.

Ключові слова: веб-інтерфейс, drag-and-drop, JavaScript, HTML5, JavaScript-бібліотека, систематизація, веб-технології.