Знакомство с техникой Drag-and-Drop и механизмом ее реализации с помощью JavaScript. Данный обзор не претендует на полноту покрытия материала. Задача статьи - познакомиться с созданием Drag-and-Drop на JavaScript. Понять сам принцип механизма и научиться применять основные инструменты для его реализации.
Определение Drag-and-Drop
Сам механизм Drag-and-Drop интуитивно понятен - “схватил-перетащил-бросил”. Преимущество внедрения Drag-and-Drop в интерфейсы заключается в упрощении реализации задач; в уменьшении количества пунктов меню типа “Copy-Paste”.
События Drag-and-Drop
Механизм Drag-and-Drop имеет в своем составе целую группу событий, с помощью которых можно контролировать процесс перетаскивания:
1
dragstart
1
dragenter
1
dragover
1
dragleave
1
drag
1
drop
1
dragend
Объект dataTransfer
Механизм Drag-and-Drop также имеет в своем составе объект dataTransfer, который служит для вспомогательных целей. В этом объекте хранится необходимая информация о событии перетаскивания. Помимо этого, в объект dataTransfer можно добавлять данные; а также считывать из него данные.
Свойства (наиболее важные) объекта dataTransfer:
1
dataTransfer.effectAllowed
1
dataTransfer.dropEffect
Методы (наиболее важные) объекта dataTransfer:
1
setData()
1
clearData()
1
setDragImage()
1
getData()
Ниже будет рассматриваться практический пример реализации Drag-and-Drop на JavaScript.
HTML разметка
Базовая HTML-разметка будет простой:
<h2 id="dropStatus">application status</h2>
<h1 id="dropTitle">drop zone</h1>
<div id="dropZone"></div>
<div id="objectsZone">
<div id="object1" class="objects">object 1</div>
<div id="object2" class="objects">object 2</div>
<div id="object3" class="objects">object 3</div>
</div>
<hr/>
<button type="button" id="readDropZone">get object data</button>Что для чего служит в этой разметке?
Заголовок 1
id="dropStatus"
Заголовок 1
id="dropTitle"
Блок 1
id="dropZone"
Объекты 1
id="object1"
1
id="object2"
1
id="object3"
1
id="dropZone"
Кнопка 1
id="readDropZone"
В итоге разметка совместно со стилями будут выглядеть таким образом - JavaScript - Drag’n’Drop - Part 1.
JavaScript - разбираемся с событиями
Прежде чем детально рассматривать работу каждой из будущих функций по обработке событий, мне кажется, будет лучше просто понять, какие события и куда мы будем “вешать”.
Итак, начнем с перетаскиваемых элементов 1
id="object1"
1
id="object2"
1
id="object3"
1
dragstart
1
dragend
Для каждого из элементов, при возникновении на нем события, мы будем запускать соответствующую функцию 1
dragStart
1
dragEnd
var objects = document.querySelectorAll('#objectsZone > .objects');
...
if ( objects ) {
[].forEach.call(objects, function (el) {
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', dragStart, false);
el.addEventListener('dragend', dragEnd, false);
});
}Обратим внимание на строку 1
el.setAttribute('draggable', 'true');
1
.objects
1
draggable="true"
На элемент 1
id="dropZone"
1
dragenter
1
id="object1"
1
id="dropZone"
1
dragleave
1
id="object1"
1
id="dropZone"
1
dragover
1
id="object1"
1
id="dropZone"
1
drop
1
id="object1"
1
id="dropZone"
И конечно же, для каждого события будет своя функция. JavaScript-код в итоге будет выглядеть таким образом:
var dropZone = document.querySelector('#dropZone');
...
if ( dropZone ) {
dropZone.addEventListener('dragenter', dragEnter, false);
dropZone.addEventListener('dragleave', dragLeave, false);
dropZone.addEventListener('dragover', dragOver, false);
dropZone.addEventListener('drop', dragDrop, false);
}Ну и на кнопку 1
id="readDropZone"
1
readZone
var dropButton = document.querySelector('#readDropZone');
...
if ( dropButton ) {
dropButton.addEventListener('click', readZone, false);
}Если суммировать все вышесказанное, то общий вид handler’ов в нашем случае будет выглядеть таким образом:
// LISTENERS
if ( objects ) {
[].forEach.call(objects, function (el) {
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', dragStart, false);
el.addEventListener('dragend', dragEnd, false);
});
}
if ( dropZone ) {
dropZone.addEventListener('dragenter', dragEnter, false);
dropZone.addEventListener('dragleave', dragLeave, false);
dropZone.addEventListener('dragover', dragOver, false);
dropZone.addEventListener('drop', dragDrop, false);
}
if ( dropButton ) {
dropButton.addEventListener('click', readZone, false);
}Далее будет детально останавливаться на каждой из функций - что она делает и для чего.
Функция dragStart (event)
Начнем с начала и запустим функцию для обработки старта события перетаскивания - события 1
dragstart
В данном случае мы будем обрабатывать событие 1
dragstart
1
id="object1"
1
id="object2"
1
id="object3"
Событие 1
dragstart
var dropStatus = document.querySelector('#dropStatus');
...
function dragStart (event) {
dropStatus.innerHTML = 'Dragging the ' + event.target.getAttribute('id');
event.dataTransfer.dropEffect = 'move';
event.dataTransfer.setData('text', event.target.getAttribute('id'));
}Функция 1
dragStart
1
dropStatus
1
innerHTML
1
id
1
event.target
Для объекта dataTransfer задается значение его свойства 1
dropEffect
1
move
В третьей строке для объекта dataTransfer с помощью метода 1
setData()
1
text
Функции dragEnter(), dragLeave(), dragOver()
Три функции, каждая из которых отслеживает событие, возникающее на элементе 1
dropZone
function dragEnter (event) {
dropStatus.innerHTML = 'You are dragging over ' + event.target.getAttribute('id');
this.classList.add('over');
}
function dragLeave (event) {
dropStatus.innerHTML = 'You left the ' + event.target.getAttribute('id');
this.classList.remove('over');
this.removeAttribute('class');
}
function dragOver (event) {
event.preventDefault();
}Первые две функции - 1
dragEnter (event)
1
dragLeave (event)
1
dropStatus
Третья функция 1
dragOver (event)
Функция dragDrop (event)
Самая большая и самая важная функция в нашем коде. Она также срабатывает на событие, возникающее на элементе 1
dropZone
var droppedIN = false;
...
function dragDrop (event) {
event.preventDefault();
var elementID = event.dataTransfer.getData('text');
var element = document.getElementById(elementID);
event.target.appendChild(element);
element.removeAttribute('draggable');
element.classList.add('dragged');
element.style.cursor = 'default';
droppedIN = true;
dropStatus.innerHTML = 'Element ' + elementID + ' dropped into the ' + event.target.getAttribute('id');
}В строке 1
event.preventDefault();
В строке:
var elementID = event.dataTransfer.getData('text');… мы из объекта dataTransfer получаем ID перетаскиваемого элемента. Вы же помните, что в функции 1
dragStart (event)
event.dataTransfer.setData('text', event.target.getAttribute('id'));…мы его как раз получали?
Далее находим перетаскиваемый элемент по его ID:
var element = document.getElementById(elementID);И помещаем его внутрь текущего активного элемента:
event.target.appendChild(element);Далее убираем у перетаскиваемого элемента атрибут 1
draggable
element.style.cursor = 'default';И сообщаем об изменившемся статусе в заголовке:
dropStatus.innerHTML = 'Element ' + elementID + ' dropped into the ' + event.target.getAttribute('id');Отдельного упоминания стоит строка 1
droppedIN = true;
1
drop
Может случиться так, что объект мы перетащили в область элемента 1
dropZone
1
dropZone
1
dragend
1
drop
Такую ситуацию обрабатывает функция 1
dragEnd()
function dragEnd() {
if ( droppedIN === false ) {
dropStatus.innerHTML = 'You let the ' + event.target.getAttribute('id') + ' to go!';
}
droppedIN = false;
}Функция readZone ()
Последняя функция из нашего примера - это функция-счетчик. Ее задача - просто посчитать, сколько элементов на данный момент мы “бросили” в область 1
dropZone
function readZone () {
var dropZoneChild = dropZone.children;
for ( var i = 0; i < dropZoneChild.length; i++ ) {
alert('Object ' + dropZoneChild[i].getAttribute('id') + ' is in ' + dropZone.getAttribute('id'));
}
}Нажимаем кнопку 1
dropButton
1
dropZone
Вот, в принципе, и все, что можно вкратце сказать. Осталось только взглянуть на готовый пример работы кода - JavaScript - Drag’n’Drop - Part 2.
На этом все. Здоровая критика и полезные замечания только приветствуются.
Этот скромный обзор не смог бы появиться, если бы не было двух полезных для меня ресурсов:
Есть более детальный обзор и более интересный пример задачи на JavaScript Drag-and-Drop размещен здесь:
