В прошлый раз я рассказывал о перемещении блоков на странице в браузерах с поддержкой HTML5. Но, знаете, у меня последнее время складывается впечатление, что к тому времени как этим стандартом можно будет свободно пользоваться, он успеет устареть.
До сих пор часто требуется поддержка IE6, а перетаскивание объектов, о котором шла речь, не работает даже в IE8, и неизвестно, будет ли работать в девятой версии самого распространённого браузера. Рассчитывать же на то, что все пользователи вдруг откажутся от IE по-моему очень оптимистично.
В любом случае, решать сегодняшние задачи приходится доступными средствами. Это означает, что если вы не используете библиотек, то для перетаскивания объектов нужно создавать обработчики событий mousedown, mousemove и mouseup. Ничего запредельно сложного, но занятие это совсем не увлекательное. Поэтому, на мой взгляд, лучше использовать какую-нибудь библиотеку, например, jQuery UI.
Чтобы сравнить насколько отличаются её возможности от тех, которые нам предоставит HTML5, я сделал точно такой же пример, как и в прошлый раз, но с использованием jQuery UI.
Рассмотрим его подробнее.
Страница имеет следующую разметку
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery UI Drag & Drop</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<h1>jQuery UI Drag & Drop</h1>
<div class="wrapper">
<div id="block1">
<div class="textBlock">Текст 1</div>
<div class="textBlock">Текст 2</div>
<div class="textBlock">Текст 3</div>
</div>
<div id="block2"></div>
</div>
</body>
</html
На странице находятся два контейнера: block1 и block2. Первый содержит три блока (теги div с классом textBlock), которые можно переместить в block2. В заголовке страницы подключены библиотеки jQuery и jQuery UI.
Теперь взгляните на код, который выполняет все необходимые действия.
$(function() {
$('.textBlock').draggable({
helper:'clone'
});
$('#block2').droppable({
hoverClass: 'dropHere'
,drop: function(event, ui) {
$(this).append($('<div class="textBlock">' + ui.draggable.html() + '</div>'));
}
});
});
С помощью метода 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… Хотя, без поддержки нового стандарта браузерах пользы от неё будет немного.
Удачи!
