HTML5 за 10 минут

Перетаскивание средствами HTML5


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

Подобная возможность оказывается полезной для выполнения таких операций, как перемещение пользователем выбранных товаров в тележку для покупок или настройка начальной страницы, на которой должны появляться только те элементы, которые выбраны пользователем. Таким образом, поддержка перетаскивания является очень важной составляющей HTML5.

Перетаскивание поддерживается с помощью целого ряда атрибутов, добавленных в элементы HTML5. Так, если установить логическое значение true в атрибуте draggable, соответствующий элемент станет перетаскиваемым. Но поддержка механизма перетаскивания реализуется в основном вручную на таком языке описания сценариев, как JavaScript, что и будет продемонстрировано в этой главе.

Перейдем непосредственно к рассмотрению операций перетаскивания.

Общее представление о перетаскивании

На уровне элементов HTML5 перетаскивание реализуется довольно просто с помощью следующих атрибутов этих элементов.

Требующиеся атрибуты: draggable, ondragenter, ondragover, ondrop, ondragstart, ondragend.

Поддерживающие браузеры: Chrome, Firefox, Opera, Safari

Основные действия, касающиеся перетаскивания, происходят в коде таких языков описания сценариев, как JavaScript, как будет показано ниже. При этом каждый атрибут с префиксом on связывается с соответствующей функцией JavaScript. Например, атрибут ondragstart связывается с функцией start, когда пользователь начинает перетаскивать тот элемент, который действительно подлежит перетаскиванию, как показано в приведенной ниже строке кода, ondragstart = "return start(event)";

Ваша задача — написать код функции JavaScript, связываемой с каждым атрибутом с префиксом on.

Обратите внимание на то, что все атрибуты с префиксом on начинаются с фразы ondrag (при перетаскивании), кроме атрибута ondrop, который соответствует событию опускания перетаскиваемого элемента на новом месте. Поэтому атрибут ondrop не следует трактовать как атрибут перетаскивания и опускания элемента, чтобы не поставить в тупик некоторые браузеры, которые просто откажутся выполнять код сценария.

Комментарии закрыты