Як організувати DragDrop в JavaScript.


DragDrop - методика, що передбачає перетягування об'єктів мишею. Наприклад, перенесення файлу в корзину, або з однієї папки в іншу. Ця інструкція пояснить, як організувати на сторінці сайту найпростіший DragDrop, використовуючи JavaScript.

Інструкція Рівень складності: Нескладно Що вам знадобиться:
  • Блокнот або будь-який інший текстовий редактор
1 крок

Створіть файл - не важливо, з розширенням "htm" або "html". Можете навіть поставити розширення "php", якщо у вас є якийсь віртуальний сервер або хостинг, зі встановленим PHP . Відкрийте файл. Для початку напишемо основний текст - у нас буде три блоки DIV (червоний, зелений і синій). Отже:


Приклад DragDrop в JavaScript






2 крок

Параметри "dt" у блоків - це деяка інформація, яка дозволить скрипту зрозуміти, що від нього хоче користувач, коли щось кудись перетягує . Наприклад, якщо є файли і кошик, то файлів можна поставити dt="file | FILENAME . EXT ", а кошику dt="trash". Тоді dt.split ('|') 0 дозволить зрозуміти, що бере участь у переносі. Отже, JavaScript:
var pickup = null;//"піднятий" мишею об'єкт
function $ (id) {return document.getElementById (id);}//функція отримання елемента за його "id"

//взяти мета поточного події (для функцій "onmouse ...") function gettarget (event, wind) {var ev = event | | window.event; return ev.target | | ev.srcElement;}//зупинити спливання події (для функцій "onmouse ...") function stopevent (event) {event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation ();}//зупинити виконання стандартного події миші function preventdef (event) {if (event . preventDefault) event.preventDefault (); else event.returnValue = false;} 3 крок

Продовжимо. Нам потрібна функція, що створює обробку подій миші для зазначеного об'єкта.


Параметри - цільовий об'єкт і функція, обробна перенесення. Параметри функції - джерело і об'єкт-приймач.
Function AddDragDrop (obj, func_drop)//створити обробку подій миші
{
//якщо "підняли" - запам'ятати, що піднято і не дозволити стандартному оброблювачу миші виконається
obj.onmousedown = function (event) {pickup = gettarget (event, window); preventdef (event); return false;};
//якщо "кинули" - виконати пов'язану функцію, скинути підняте і зупинити спливання події (читайте мануали, якщо хочете)
obj.onmouseup = function (event) {var target = gettarget (event, window); func_drop (pickup, target); pickup = null; stopevent (event );};
}

//якщо щось кинули на форму - скинути підняте document.onmouseup = function (event) {pickup = null;} 4 крок

Останнє. Нам потрібна функція обробник, а також необхідно виконати "AddDragDrop" для наших трьох блоків.
Function DropFunc (from, to)
{
//буде виведено "red ? green", якщо червоний перенести на зелений
alert (from.getAttribute ('dt') '?' to.getAttribute ('dt'));
}

AddDragDrop ($ (' red '), DropFunc); AddDragDrop ($ ('green'), DropFunc); AddDragDrop ($ ('blue'), DropFunc); 5 крок

Залишилося тільки перевірити;) Відкрийте файл браузером, натисніть на один з блоків, перемістіть курсор, не відпускаючи кнопки миші, на інший блок, і відпустіть кнопку миші. Залишилося тільки пристосувати цей приклад під себе.

PS Приклад перевірений на працездатність особисто на Internet Explorer 6, Mozilla Firefox 3 і Opera 9.52

Поради та попередження:
  • Використовуйте одну функцію-обробник тільки якщо об'єктів мало або вони однотипні, інакше не важко писати кілька функцій.
  • Можете створити функцію "DropNone", не виконує нічого, для об'єктів, які використовуються тільки як джерело.
  • Можете змішати даний метод з AJAX'ом для створення повноцінних веб-додатків.