Простой способ реализации технологии «тащи-и-бросай» на HTML5
Из всех технологий, которыми должен владеть веб-разработчик, наибольшее замешательство, как правило, вызывает эмуляция drag ‘n’ drop. Это не новая технология, она существует уже много лет, но большинство разработчиков любят цепляться за старые методы, основанные на JQuery. Теперь, когда HTML5 уже включает в себя drag-and-drop API, у нас появился просто способ реализации этой технологии, без головной боли.
Механику drag-and-drop легко понять. У вас есть объект и цель. Цель состоит в том, чтобы дать пользователю возможность нажать на объект и перетащить его к цели, и ваше приложение должно реагировать соответственно.
Создайте простой шаблон, в который можно будет поместить все элементы кода:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Определите перемещаемый объект, установив атрибут “draggable” на нужный элемент в секции Body:
<div> <img id="dragMe" src="pic.jpg" draggable="true"> </div>
Определите цель - зону, в которой можно перетаскивать объект. Просто задайте цели CSS ID:
<div id="drop_target"> Bombs away! </div>
Добавьте немного CSS стиля, чтобы убедиться, что все выглядит как нужно. Вставьте следующий код в секцию Head:
<style>
#drop_target{border:3px solid #000; padding:10px; height:100px; width:100px;}
#dragMe{height:50px;width:50px;}
</style>
Реализуйте функцию JS, чтобы приложение знало о существовании объектов и могло взаимодействовать с ними. Просто определите две функции, которые будут обрабатывать все действия, dragObject и dropObject. Вот так:
<script>
var moved=false;
function dragObject(e){
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData("obj1", e.target.id);
return false;
}
function dropObject(e){
if(moved==true){
return false;
}
var received=e.dataTransfer.getData("obj1");
e.dataTransfer.dropEffect="move";
e.preventDefault();
e.stopPropagation();
e.target.appendChild(document.getElementById(received));
moved=true;
return false;
}
</script>
Это основное введение в концепцию drag-and-drop, вы можете найти полную информацию об этой технологии на официальном сайте HTML.
Комментариев 0