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

До сих пор часто требуется поддержка IE6, а перетаскивание объектов, о котором шла речь, не работает даже в IE8, и неизвестно, будет ли работать в девятой версии самого распространённого браузера. Рассчитывать же на то, что все пользователи вдруг откажутся от IE по-моему очень оптимистично.

В любом случае, решать сегодняшние задачи приходится доступными средствами. Это означает, что если вы не используете библиотек, то для перетаскивания объектов нужно создавать обработчики событий mousedown, mousemove и mouseup. Ничего запредельно сложного, но занятие это совсем не увлекательное. Поэтому, на мой взгляд, лучше использовать какую-нибудь библиотеку, например, jQuery UI.

Чтобы сравнить насколько отличаются её возможности от тех, которые нам предоставит HTML5, я сделал точно такой же пример, как и в прошлый раз, но с использованием jQuery UI.

Рассмотрим его подробнее.

Страница имеет следующую разметку

На странице находятся два контейнера: block1 и block2. Первый содержит три блока (теги div с классом textBlock), которые можно переместить в block2. В заголовке страницы подключены библиотеки jQuery и jQuery UI.

Теперь взгляните на код, который выполняет все необходимые действия.

С помощью метода draggable мы делаем все элементы с классом textBlock перемещаемым. Параметр helper:'clone' указывает, что сам элемент должен оставаться на месте, а перемещаться будет его копия.

Чтобы сделать block2 «приёмником» перемещаемых элементов используется метод droppable. В параметре hoverClass указываем имя CSS класса, который будет присваиваться блоку, когда над ним находится перемещаемый элемент.

В параметре drop указываем обработчик события drop. Так же, как и в прошлый раз, здесь мы просто создаём новый элемент внутри контейнера block2. Получить доступ к перетаскиваемому элементу можно с помощью объекта ui.draggable, который передаётся во втором параметре обработчика.

Как видите, код получился даже короче чем в прошлый раз. И, кроме того, он работает во всех браузерах, поддерживаемых библиотекой jQuery. Более того, в jQuery UI входят компоненты вроде Sortable, которые значительно расширят её возможности.

Но у HTML5 есть два важных преимущества.

1) Потребление ресурсов. Попробуйте просто подвигать любой из блоков мышкой и одновременно посмотрите нагрузку на процессор. Думаю, результат будет виден невооружённым взглядом.

2) Поддержка браузером HTML5 означает, что вы сможете перетаскивать элементы как из другого окна, так и из другого приложения, а в случае с jQuery UI это невозможно.

Наверное, отличным решением была бы JS библиотека, подобная jQuery UI, но написанная с использованием возможностей HTML5… Хотя, без поддержки нового стандарта браузерах пользы от неё будет немного.

Удачи!