Здравствуйте дорогие друзья и сегодня мы рассмотрим перетаскивания элементов в html5 или Drag-and-drop.
Если скопировать первое попавшиеся определение данной технологии, то оно будет примерно такое:
Drag-and-drop - способ оперирования элементами интерфейса в интерфейсах пользователя (как графическим, так и текстовым, где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь» или сенсорного экрана. Может немного запутано не так ли? Генерируя пример лишь скажу, что с данной технологией мы все отлично знакомы. Пример перетаскивание файла в папку с помощью мыши или товара в корзину в интернет магазине. Именно перетаскивание и помещения какого либо элемента в другой и называют Drag-and-drop.
Ну хватит теории давайте займемся практикой.
Давайте сделаем блок в который мы будем перетаскивать определенный текст.
Допустим у нас есть следующий код:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>
Drag-and-drop
</title>
</head>
<body>
<style>
#el{
width:200px;
float:left;
}
#block{
width:500px;
height:500px;
float:right;
border:1px solid #000;
position:relative;
}
#block span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
</style>
<p id="el" >
Перетаскиваемый элемент
</p>
<div id="block" >
<span>Добавляем сюда элементы</span>
</div>
</body>
</html>Первое что мы должны сделать, так это задать элементу который мы будем перетаскивать атрибут draggable со значением true.
<p id="el" draggable="true" >
Перетаскиваемый элемент
</p>Теперь когда мы зажмем кнопку мыши и попытаемся перенести элемент у нас при переносе будет изменен курсор.
Далее мы должны рассмотреть события которые отслеживаются при перемещении и добавлении элемента в Drag-and-drop:
dragStart - начало перетаскивания элемента.
dragEnter - перетаскиваемый элемент достигает конечного элемента.
dragOver - курсор мыши наведен на элемент при перетаскивании.
dragLeave - курсор мыши покидает пределы перетаскиваемого элемента.
drag - курсор двигается при перетаскивании.
drop - происходит помещение одного элемента в другой .
dragEnd - пользователь отпускает курсор мыши в процессе перетаскивания.
Теперь мы должны из этих событий построить последовательность наших действий.
Во первый, мы обратимся к событию dragStart которое срабатывает при попытке перетаскивания элемента.
document.querySelector('#el').addEventListener('dragstart' , function(event){
/* Срабатывает когда эламент начал перемещаться. */
event.dataTransfer.effectAllowed='move';
event.dataTransfer.setData("par", event.target.getAttribute('id'));
var center_height = event.target.clientHeight / 2, //Центр по высоте
center_width = event.target.clientWidth / 2; //Центр по ширине
event.dataTransfer.setDragImage(event.target,center_width,center_height);
});Смотрим что и удивляемся что я тут нагородил:
event.dataTransfer.effectAllowed - тип доступного действия в нашем случае это move(перемещение) , есть и еще : none, copy, copyLink, copyMove, link, linkMove, all или uninitialized.
event.dataTransfer.setData - Записываем данные в специальное хранилище и даем идентификатор par. В качестве данных у нас название идентификатора перетаскиваемого элемента. Кстати кто не знает, то event - это объект события(элемент с id="el"), а свойство target позволяет обращаться к нему как к элементу.
event.target.clientHeight / 2 - находим середину элемента по высоте
event.target.clientWidth / 2 - находим середину элемента по ширине
event.dataTransfer.setDragImage(event.target,center_width,center_height); - здесь мы задаем нашему изображению, которое появляется при перетаскивании элемента, позицию курсора по отношению к нему. То есть когда мы перетаскиваем элемент у нас появляется дубликат нашего элемента в виде изображения и в нашем случае курсор на этом изображении установлен примерно по центру как мы и задумали.
Едем дальше, теперь поработаем с принимающим элементом id="block", для него сразу зададим два события:
/* перетаскиваемый элемент достигает конечного элемента */ Скопировать в буфер
document.querySelector('#block').addEventListener('dragenter' , function(event){
event.preventDefault();
return true;
});
/* курсор мыши наведен на элемент при перетаскивании */
document.querySelector('#block').addEventListener('dragover' , function(event){
event.preventDefault();
});теперь прошу обратить внимания на то как меняется курсор, когда перетаскиваемый элемент находится над блоком в который мы хотим его поместить. Это реализовано благодаря предыдущим действиям.
И нас по сути остается последний штрих это помещение одного элемента в другой, для мы используем событие drop(Помещение):
document.querySelector('#block').addEventListener('drop' , function(event){
var data = event.dataTransfer.getData("par");
event.target.appendChild(document.getElementById(data));
event.stopPropagation();
});event.dataTransfer.getData("par") - Считываем название идентификатора перемещаемого элемента из хранилища ранее созданного параметра par.
event.target.appendChild(document.getElementById(data)) - помещаем или добавляем в перетаскиваемый элемент в блок.
event stopPropagation останавливает "всплытие" вызова события к родительским элементам.
Ну вот и все дорогие друзья, следует отметить что это еще далеко не все на что способна данная технология например с помощью нее можно делать ползунки, скролы и многое , многое другое.
А на этом я с вами прощаюсь, удачи!
