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

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

DragDrop – методика, подразумевающая перетаскивание объектов мышью. Например, перенос файла в корзину, или из одной папки в другую. Эта инструкция объяснит, как организовать на странице сайта простейший DragDrop, используя JavaScript.

Инструкция

Уровень сложности: Несложно

Что вам понадобится:

  • Блокнот или любой другой текстовый редактор

1 шаг

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

Создайте файл – не важно, с расширением “htm” или “html”. Можете даже поставить расширение “php”, если у вас есть некий виртуальный сервер или хостинг, с установленным PHP. Откройте файл. Для начала напишем основной текст – у нас будет три блока DIV (красный, зеленый и синий). Итак:
<HTML><HEAD>
<META content="text/html; charset=windows-1251" http-equiv="Content-Type">
<TITLE>Пример DragDrop в JavaScript</TITLE>

</HEAD><BODY>
<DIV id="red" dt="red" style="width:64px;height:64px;background:red;border:1px solid black;"></DIV><BR>
<DIV id="green" dt="green" style="width:64px;height:64px;background:green;border:1px solid black;"></DIV><BR>
<DIV id="blue" dt="blue" style="width:64px;height:64px;background:blue;border:1px solid black;"></DIV>

</BODY></HTML>

2 шаг

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

Параметры “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 шаг

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

Продолжим. Нам нужна функция, создающая обработку событий мыши для указанного объекта. Параметры – целевой объект и функция, обрабатывающая перенос. Параметры функции – источник и объект-приемник.
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 шаг

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

Последнее. Нам нужна функция обработчик, а также необходимо выполнить “AddDragDrop” для наших трех блоков.
function DropFunc(from,to)
{
// будет выведено “red → green”, если красный перенести на зеленый
alert(from.getAttribute(‘dt’)’ → ’to.getAttribute(‘dt’));
}

AddDragDrop($(‘red’), DropFunc); AddDragDrop($(‘green’), DropFunc); AddDragDrop($(‘blue’), DropFunc);

5 шаг

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

Осталось только проверить ;) Откройте файл браузером, нажмите на один из блоков, переместите курсор, не отпуская кнопки мыши, на другой блок, и отпустите кнопку мыши. Осталось только приспособить этот пример под себя.

P.S. Пример проверен на работоспособность самолично на Internet Explorer 6, Mozilla Firefox 3 и Opera 9.52

Советы и предупреждения:

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

Обсуждение

713_micro
Рейтинг
  1. +
  2. 0
Kuru (20:30 11.11.2009)

Спасибо большое, ты мне очень помог :)

правда…

375_micro
Рейтинг
  1. +
  2. 0
rialit (00:18 22.05.2010)

Большое спс!!!

Avatar_micro
Рейтинг
  1. +
  2. 0
RomanDiluteD (03:27 15.04.2011)

Спасибо большое, как раз сейчас изучаю <b>JavaScript</b>

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 3
3
1626