Как организовать DragDrop в JavaScript
DragDrop методика, подразумевающая перетаскивание объектов мышью. Например, перенос файла в корзину, или из одной папки в другую. Эта инструкция объяснит, как организовать на странице сайта простейший DragDrop, используя JavaScript.
Инструкция
Что вам понадобится:
- Блокнот или любой другой текстовый редактор
1 шаг
Создайте файл не важно, с расширением htm или html . Можете даже поставить расширение php , если у вас есть некий виртуальный сервер или хостинг, с установленным PHP. Откройте файл. Для начала напишем основной текст у нас будет три блока DIV (красный, зеленый и синий). Итак:
Пример DragDrop в JavaScript
2 шаг
Параметры dt у блоков это некоторая информация, которая позволит скрипту понять, что от него хочет пользователь, когда что-то куда-то перетаскивает. Например, если есть файлы и корзина, то файлам можно поставить dt= file|FILENAME.EXT , а корзине dt= trash . Тогда dt.split( #8216;| #8217;) позволит понять, что участвует в переносе. Итак, 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 #8594; green , если красный перенести на зеленый
alert(from.getAttribute( #8216;dt #8217;) #8217; #8594; #8217;to.getAttribute( #8216;dt #8217;));
}
AddDragDrop($( #8216;red #8217;), DropFunc);
AddDragDrop($( #8216;green #8217;), DropFunc);
AddDragDrop($( #8216;blue #8217;), DropFunc);
5 шаг
Осталось только проверить ;) Откройте файл браузером, нажмите на один из блоков, переместите курсор, не отпуская кнопки мыши, на другой блок, и отпустите кнопку мыши. Осталось только приспособить этот пример под себя.
P.S. Пример проверен на работоспособность самолично на Internet Explorer 6, Mozilla Firefox 3 и Opera 9.52
Советы и предупреждения:
- Используйте одну функцию-обработчик только если объектов мало или они однотипные, иначе не затрудняйтесь писать несколько функций.
- Можете создать функцию "DropNone", не выполняющую ничего, для объектов, которые используются только как источник.
- Можете смешать данный метод с AJAX "ом для создания полновесных веб-приложений.
Как организовать DragDrop в JavaScript
