all-of-all.ru
Посмотреть
Статьи

Наши друзья

Спецпредложения интернет-магазина
 Статья / Техника / Инструкции / Компьютеры / Как организовать DragDrop в JavaScript

Как организовать DragDrop в JavaScript


 Николай Баранов, 23.04.2012 18:03:29
Как организовать DragDrop в JavaScript


(Нет голосов)
414 просмотров
В избранное
Комментировать(0)

Как организовать 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;)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 #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
 Статья / Техника / Инструкции / Компьютеры / Как организовать DragDrop в JavaScript
 Николай Баранов, 23.04.2012 18:03:29

Назад в раздел

Самые интересные новости:

загрузка...