Уже в течение долгого времени существуют JavaScript функции, которые позволяют нам создавать drag & drop интерфейсы. Но ни одна из этих реализаций, не является родной для браузера.У HTML5 есть собственный метод создания drag & drop интерфейсов (с небольшой помощью JavaScript). В этой статье, мы расскажем вам, как этого можно достичь …

Поддержка браузеров

В настоящее время HTML5 drag & drop поддерживается всеми основными браузерами для десктопов (в том числе IE (даже в IE 5.5 имеется частичная поддержка)), но не поддерживается ни одним из популярных мобильных браузеров.

Drag&Drop события

На каждом этапе перетаскивания (drag & drop) запускаются различные события для того, чтобы браузер знал, какой JavaScript код нужно выполнять. Список событий:

• dragStart: запускается, когда пользователь начинает перетаскивать элементы;
• dragEnter: запускается, когда перетаскиваемый элемент впервые перетаскивается над целевым элементом;
• dragOver: срабатывает при перемещении мыши над элементом, когда происходит перетаскивание;
• dragLeave: запускается, если курсор пользователя оставляет элемент при перетаскивании;
• drag: приходит в действие каждый раз, когда мы двигаем мышью во время перетаскивания нашего элемента;
• drop: запускается, когда выполняется фактический drop;
• dragEnd: срабатывает, когда пользователь отпускает кнопку мыши при перетаскивании объекта.

С учетом всех этих слушателей событий, у вас есть хороший контроль над тем, как будет работать интерфейс.

Объект dataTransfer

Именно здесь и происходит все drag&drop волшебство. Этот объект содержит данные, которые были отправлены drag операцией. Данные могут быть установлены и получены различными способами, наиболее важными из которых являются:

• dataTransfer.effectAllowed=value: возвращает разрешенные типы действий, возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
• dataTransfer.setData(format, data): добавляет определенные данные и формат.
• dataTransfer.clearData(format): очищает все данные для определенного формата.
• dataTransfer.setDragImage(element, x, y): задает изображение, которое вы хотите перетащить, х и у значения указывают, где должен быть курсор мыши(0, 0 расположит его вверху слева).
• data = dataTransfer.getData(format) : как следует из названия, он возвращает данные для определенного формата.

Создание drag&drop примера

Теперь мы начнем создавать простой drag&drop пример . Как вы видите, у нас есть два маленьких divs и один большой, мы можем перетащить маленькие дивы внутрь большого, и даже переместить их обратно.

Перетаскивание объекта

Первое, что нам нужно сделать, это создать HTML. Мы делаем div перетаскиваемыми с помощью draggable атрибута:

Когда это будет сделано, мы должны определить JavaScript функцию, которая будет cрабатывать, как только мы будем начинать передвигать этот элемент:

Function dragStart(ev) { ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100); return true; }

В этом коде, мы сначала объявляем, какой тип эффекта позволяем в операции и устанавливаем его на move. Во второй строке, мы устанавливаем данные для работы, где текст будет Text и значением будет ID элемента, который мы перетаскиваем. После этого, мы используем метод setDragImage, который установит, что мы будем перетаскивать, а затем, где будет курсор во время перетаскивания, а так как, кубики 200 на 200 пикселей, мы поместили его в самый центр. В конце, мы возвращаем return true.

Drop объекта

Для того, чтобы элемент принял drop, он должен прослушать 3 различных события: dragEnter, dragOver, а также drop события. Так что давайте добавим это к нашему HTML5 в div с ID большого (big):

Function dragEnter(ev) { ev.preventDefault(); return true; } function dragOver(ev) { ev.preventDefault(); }

В первой функции мы определяем, что должно произойти, когда элемент, который мы перетаскиваем достигнет требуемого элемента, где должен произойти drop, в данном случае мы только предотвращаем поведение браузера по умолчанию. Следующее, в dragOver функции мы просто не допускаем, чтобы произошел drop по умолчанию.

В следующей части, мы определяем функцию, для того, когда элемент будет “брошен” на желаемой цели:

Function dragDrop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; }

В этой последней части, мы сначала установили переменную data, где мы получаем все данные, которые доступны для текстового формата, а затем мы добавляем data к div, где нужно “бросить” элемент.

Сделать секцию drop целью

В демо показано, что два div могут быть перемещены обратно на свои места. К счастью, добавление еще одной drop цели, намного проще, чем вы думаете. Потому что эти функции у нас уже есть и все, что нам нужно сделать, это добавить слушатели событий:

И это все, что нужно для того, чтобы позволить перетаскивание div на прежнее место.

Существует много drag&drop приложений, которые построены с использованием JavaScript библиотек, и зачастую использовать их проще. Но мы надеемся, что в этой HTML5 и JavaScript технике, вы увидете будущий потенциал для решения ваших задач.

Drag&Drop («перетащи и положи») – это один из способов обмена данными между приложениями. Этим способом обмена пользуются многие программные приложения. Например, очень часто так перемещаются файлы и папки.

В библиотеке визуальных компонент - VCL реализована собственная версия Drag&Drop – технологии, которая обеспечивает прием и передачу любых управляющих элементов внутри одной и той же формы. При таком внутреннем использовании VCL не обращается к операционной системе, хотя для организации общения различных приложений нужно было бы использовать соответствующие функции API Windows.

Пользователь, нажав на левую кнопку мыши, может перетащить управляющий элемент (объект – источник) на другой элемент (объект-приемник). В моменты перетаскивания и отпускания генерируются события, которые должна обрабатывать программа (получателем событий является элемент, над которым находится курсор мыши). Свойство компонентов DragModeотвечает за их участие в процессе обмена данными.

DragMode = dmAutomatic - события срабатывают автоматически, программист пишет только коды, соответствующих обработчиков событий.

DragMode = dmManual - все вызовы программист должен организовать сам.

События, возникающие при перетаскивании

Событие OnDragOver возникает во время перемещения курсора мыши над объектом-приемником, а также при отпускании кнопки на этом объекте.

Параметры события:

Sender- объект-приемник (над ним находится курсор);

Source - объект-источник;

X,Y- координаты мыши в системе клиентской области объекта Sender;

State- состояние (имеет одно из трех значенийdsDragEnter– курсор мыши появился над элементом;dsDragMoveкурсор перемещается над элементом;dsDragLeave– курсор ушел с элемента или над элементом была отпущена кнопка).

Accept– логическая переменная. В этой переменной обработчик должен вернуть свое решение принимать или не принимать объектSource.

Например, компонент класса Label(Name=Label1)должен принимать только компоненты классаShape(геометрические фигуры), тогда его обработчик будет содержать проверку переносимого объекта-источника(Source):

void __fastcall TForm1::Label1DragOver(TObject *Sender, TObject *Source,

int X, int Y, TDragState State, bool &Accept)

Accept=Source->ClassNameIs("TShape");

Событие OnDragDrop возникает при отпускании левой кнопки мыши над элементом, готовым к приему. Его параметрыSender,Source,XиYимеют тот же смысл, что и у предыдущего события. Содержимое этого обработчика зависит от того, какие функции программист разрешает выполнять пользователю путем перетаскивания. Это может быть изменение местоположения объектов, обмен информацией и т.д.

В следующем примере не происходит физического перемещения объектов; компонент Label1 получает указатель на перемещенный объект (геометрическая фигура) и считывает значения свойств (Height, Width)для вычисления периметра фигуры. Результат вычислений размещается в Label1-> Caption.

void __fastcall TForm1::Label1DragDrop(TObject *Sender,

TObject *Source, int X, int Y)

float p, pi=3.14; int w, h, r, D;

if (String(Source->ClassName())=="TShape")

h=((TShape *)Source)->Height;

w= ((TShape *)Source)->Width ;

D = w; if (D > h) D = h;

switch (((TShape *)Source) -> Shape)

{ case stRectangle:

Label2->Caption ="Прямоугольник";

Label2->Caption = "Квадрат";

Label2->Caption = "Круг";

Label2->Caption = "Эллипс";

p=pi*(3*(w+h)/4-sqrt(w*h)/2);

case stRoundRect:

Label2->Caption = "Закругленный

прямоугольник";

r=(D-((TShape*)Source)->Pen->

p=2*(w+h)-8*r+2*pi*r;

case stRoundSquare:

Label2->Caption="Закругленный

квадрат";

r=(D-((TShape*)Source)->Pen->

p=4*D-8*r+2*pi*r;

p=p/(Form1->PixelsPerInch/2.54);

Label1->Caption = FloatToStr (p);

При завершении процесса перетаскивания вне зависимости от его результата исходный объект получает событие OnEndDrag . Его параметры:

Sender– указатель объекта - источника;

Target– указатель объекта - приемника;

X, Y– координаты курсора.

В следующем примере переносимый компонент Shape1 узнает имя объекта - приемника (если объект не принят передается NULL):

void __fastcall TForm1::Shape1EndDrag(TObject *Sender, TObject *Target,

if (Target != NULL)

Label2->Caption =(AnsiString) ((TComponent *) Target)->Name;

Задумывался ли ты, какой десктоп используют прожженные линуксоиды, которые большую часть времени сидят в терминале, а о таких вещах, как иконки на рабочем столе и drag’n’drop, либо уже забыли, либо никогда не узнавали? Те самые странные люди, которые на каждый чих пишут shell-скрипт и с отвращением смотрят на KDE и GNOME. Что ж, сегодня мы покажем, как настроить настоящий гиковский десктоп с тайлами, строками состояния и терминалами.

Начнем с выбора дистрибутива. Ubuntu, Mint, Debian и Fedora не годятся на роль дистрибутива для истинного гика. В них нет ничего плохого, но если ты обратишь внимание, что же юзают любители ковырять систему, то, скорее всего, увидишь Arch Linux, Gentoo или Slackware. Это простые как сапог дистрибутивы, позволяющие тонко контролировать систему.

Остановимся на Arch Linux, наиболее популярном сегодня дистрибутиве для гиков. Свежеустановленный Arch Linux представляет собой простенький консольный дистрибутив, который ничего не умеет. Наиболее консервативным товарищам, освоившим UNIX еще в восьмидесятых, хватит и этого, но все-таки нужен хоть какой-то графический интерфейс и графический браузер (да, есть и текстовые, например Lynx, w3m, Links, ELinks).

В UNIX-подобных системах (к которым, конечно же, относится и Linux) за формирование графического интерфейса в первую очередь отвечает так называемый менеджер окон (Window Manager, WM). Это особое приложение, основная задача которого - управлять окнами, создавать для них рамки с кнопками, корректно обрабатывать ситуации наложения окон друг на друга, а в отдельных случаях создавать панельки и менюшки для запуска приложений и управления ими; хотя эта задача обычно ложится на плечи других приложений, которые вместе с менеджером окон формируют полноценный рабочий стол (Desktop Environment, DE), такой как GNOME, KDE или Xfce.

Нам никакой DE не нужен, это изобретение шайтанов, пришедших в мир UNIX из Windows. Более того, нам не нужен классический менеджер окон, ибо двигать окна мышкой и накладывать их друг на друга контрпродуктивно. Вместо этого мы установим так называемый тайловый менеджер окон, который не разрешает таскать окна по экрану, а вместо этого либо всегда открывает все окна на полный экран, либо делит экран между окнами пропорционально (или непропорционально), не позволяя им накладываться друг на друга.

Наверное, лучший тайловый менеджер окон из доступных на сегодняшний день - это i3. Установим его:

$ sudo pacman -S i3-wm

Не отходя от кассы, сразу поставим i3status (он будет выводить статусную строку с различной полезной информацией и треем в нижней части экрана), а также крохотное приложение dmenu, позволяющее быстро запускать приложения, и, конечно же, эмулятор терминала:

$ sudo pacman -S i3status dmenu xterm

Если это действительно чистая установка Arch Linux, то также понадобится сервер Xorg, драйвер видеокарты и драйвер тачпада (если это ноутбук):

$ sudo pacman -S xorg-server xf86-video-intel xf86-input-synaptics

Пакет xf86-video-intel меняем на нужный в зависимости от производителя видеочипа:

• Nvidia: xf86-video-nouveau;
• ATI/AMD: xf86-video-ati.

Нам понадобится также менеджер логина - то самое графическое окно с полями для ввода имени пользователя и пароля, которое ты видишь при загрузке системы. Никто не запрещает использовать менеджер логина KDE, GNOME, Xfce или любой другой графической среды, но это весьма тяжеловесные приложения, которые тащат за собой массу совершенно не нужных зависимостей. Поэтому мы остановимся на простом и быстром менеджере логина SLiM:

$ sudo pacman -S slim

Сперва подправим его конфиг /etc/slim.conf , добавив в него такую строчку:

Current_theme archlinux

Сразу после успешного логина SLiM будет исполнять содержимое файла ~/.xsession , который по задумке должен делать некоторую первоначальную настройку пользовательского окружения и запускать менеджер окон. Не будем изменять традициям и добавим в файл следующие строки:

# Укажем предпочтительный язык для интерфейса системы и приложений # Удали эти строки, если предпочитаешь английский язык export LANG=ru_RU.utf8 export LC_ALL=ru_RU.utf8 # Настроим переключатель раскладки между русским и английским по клавише Caps Lock setxkbmap "us,ru" ",winkeys" "grp:caps_toggle,grp_led:caps" # Отключим раздражающий бибикающий звук xset b off # Запустим i3 exec i3

Это все, теперь можно запустить графический интерфейс:

$ sudo systemctl start slim

На экране должно появиться окно логина SLiM.

i3 и dmenu

Итак, перед тобой i3. Точнее, ты должен увидеть только черный экран со строкой состояния снизу (в ней отображается текущая заполненность диска, подключенные сетевые интерфейсы, уровень батареи, дата и время). Никаких меню, кнопок «Пуск» и прочего булшита.

i3 полностью управляется с клавиатуры. Win + Enter запускает терминал (сейчас это убогий xterm, но мы его заменим). По умолчанию окна занимают всю площадь экрана, деля его на две, три, четыре и более части по вертикали. Такое поведение можно отключить, нажав Win + w, тогда каждое окно будет открыто на полный экран - это практически идеальный вариант для ноутбуков с диагональю экрана 10–13".

Переключение между окнами - Win + стрелки; Win + 1…0 - переключение между рабочими столами, которые здесь называются воркспейсами (Workspace). Чтобы закрыть окно, нажимаем Win + Shift + Q. На данном этапе этих комбинаций будет вполне достаточно.

Win + d - особая комбинация. Она открывает dmenu - строку ввода вверху экрана, позволяющую быстро запускать нужные приложения. По своей сути dmenu сильно напоминает универсальную строку поиска типа Spotlight в macOS: ты просто начинаешь вбивать имя приложения, и он подсказывает тебе варианты. Автодополнение также работает. В i3 dmenu можно назвать аналогом меню приложений в классических рабочих столах.

i3 поддерживает массу вариантов деления экрана на рабочие области, так, чтобы в них можно было расположить различные приложения. Доступен и режим классических плавающих окон. Перевести текущее приложение в этот режим можно с помощью комбинации Win + Shift + пробел. Перетаскивать окно можно мышкой, зажав клавишу Win, изменять размер - правой кнопкой мыши, опять же с зажатой кнопкой Win.

Шрифты, терминал и scratchpad

По умолчанию i3 использует довольно унылый стандартный шрифт Xorg, а в качестве эмулятора терминала мы установили дурной xterm, который давно желают закопать не только пользователи, но и сами разработчики (я не шучу). Это необходимо исправить.

Начнем со шрифта. О выборе консольного моноширинного шрифта (а именно такой нам нужен, в том числе и для i3) много спорят, но я предлагаю остановиться на Terminus. Это четкий шрифт без засечек с минимумом округлых форм, он очень хорошо читается и отлично подходит для не Retina-дисплеев (да и для Retina тоже). Устанавливаем:

$ sudo pacman -S terminus-font

С эмулятором терминала тоже не все однозначно. Эталоном уже на протяжении многих лет считается urxvt (rxvt-unicode). Он легкий, быстрый и хорошо настраиваемый. Но так как в рамках этой статьи мы не можем вдаваться в детали глубокой настройки каждого компонента (а без такой настройки urxvt ужасен), то остановимся на LilyTerm. Он быстрый, имеет минимум зависимостей и все преимущества urxvt, а настроить его можно с помощью контекстного меню:

$ sudo pacman -S lilyterm

Теперь необходимо внести изменения в файл настроек i3, чтобы он подхватил наш шрифт и использовал LilyTerm вместо стандартного терминала. Открываем файл ~/.config/i3/config , находим опцию font и меняем ее значение:

Font pango:xos4 Terminus 8

Чтобы запускать LilyTerm по Win + Enter, добавляем такую опцию:

Bindsym $mod+Return exec lilyterm

Ну и опция для запуска dmenu с нашим шрифтом:

Bindsym $mod+d exec dmenu_run -fn "xos4 Terminus-8"

Плюс парочка строк для включения так называемого scratchpad:

Bindsym $mod+Shift+minus move scratchpad bindsym $mod+minus scratchpad show

Scratchpad в терминологии i3 - это доступное по хоткею небольшое окно посередине экрана. Он хорошо подходит для приложений, которые нужны часто, но отвлекают, постоянно находясь на экране (да, для мессенджеров). Win + минус показывает scratchpad, повторное нажатие скрывает его. Win + Shift + минус отправляет текущее окно в scratchpad.

Когда все изменения будут сделаны, сохраняем файл и нажимаем Win + Shift + R, чтобы перезапустить i3.

Продолжение доступно только подписчикам

Вариант 1. Оформи подписку на «Хакер», чтобы читать все материалы на сайте

Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов.

Проще всего что-то взять и положить, чем писать, что нужно взять и куда положить. Конечно без мышки, или подобного ей устройства, ничего не выберешь и ничего не укажешь, но даже в текущем положении вещей использование идеи «drag and drop» очень естественно и комфортно.

Область применения идеи - далеко не только интернет-магазины, электронные библиотеки, поисковые или информационные системы, а и прикладная сфера. Идея очень даже применима в разработке сайтов и их элементов, создаваемых и сопровождаемых интерактивно, без участия программиста.

Описание идеи

Выбрать, переместить и положить - идея естественная и удобная. Просто удивительно, что она не родилась, когда мышка стала незаменимым аксессуаром компьютера.

Самый очевидный пример - выбор товара в интернет-магазине. Взять мышкой нужный товар и перетащить его в корзину для покупок - просто, естественно и удобно. Загрузка файлов: взять документ за пределами окна браузера и положить его на элемент страницы, инициировав тем самым передачу документа на сервер - также практичная идея.

Для разработчика идея «drag and drop» - это манипулирование элементами страницы без ручного пересчета координат и размеров тегов, возможность выбора нескольких элементов и выравнивания их, а также перемещения сторон блочных тегов.

HTML и CSS - отличные языки описания тегов и стилей их оформления, но когда разработчик имеет возможность интерактивно манипулировать элементами страницы без ручного пересчета координат и размеров, это делает работу более комфортной и эффективной.

Простой перенос файлов

«Drag and drop»: перевод с английского на русский буквально звучит «тащи и бросай». На практике это звучит и действует лучше: выбрал, перенес и отпустил - просто и естественно.

Реализовать на странице передачу файлов на страницу, на сервер или для иного использования очень просто.

В данном примере мышкой было выбрано несколько файлов на рабочем столе (левый рисунок). На выделении была нажата левая кнопка мышки и выбранное «поехало» в корзинку. Браузер сам показал, как это происходит, написал подсказку «копирование» и вокруг создал контуры перемещаемых файлов.

Когда мышка оказалась над корзинкой, посетитель отпустил левую кнопку мышки, событие «тащи и бросай» состоялось и на странице сайта (нижний рисунок) JavaScript-код смог получить и обработать все файлы, которые посетитель предоставил странице (сайту).

Описание реализации

Код, который выполняет эту процедуру, очень прост. Его повторить в любых вариантах использования может даже начинающий разработчик.

Здесь интерфейс пользователя представлен двумя тегами: scPlaceFile (это сама корзинка, куда нужно положить файлы) и scPlaceFiles (это результат обработки файлов, в данном случае их список).

Логика работы страницы такова. При загрузке страницы в браузере в корзинке назначается обработчик события «ondrop» - положить, остальные события блокируются и не используются.

Страница работает в штатном режиме, но как только посетитель выберет файл (файлы) и перетащит их на картинку корзинки, то есть на тег scPlaceFile, будет запущена обработка события «файлы приехали».

Данный обработчик просто выводит список файлов. Их количество находится в event.dataTransfer.files.length, а информация о каждом файле в event.dataTransfer.files[i].name. Что делать с полученными данными, определяет разработчик, в данном случае просто формируется список полученных файлов.

После обработки событие блокируется и не распространяется. Это необходимо, чтобы браузер не занимался самодеятельностью и не вмешивался в процесс обработки полученной информации.

DnD и внешние данные

Загрузка изображений на сервер в «drag and drop» - обычная практика применения этой технологии. Как правило, разработчик создает форму для загрузки файла (1), которая работает обычным образом (2). Посетитель может в обычном режиме выбирать файлы и загружать их.

Однако если посетитель на определенное место формы сделает «drag and drop», то поле имени файла (файлов) заполнится автоматически.

Это хорошее решение. Допустить, что на компьютере нет мышки, конечно, очень трудно. Но лучше разработать интерфейс пользователя в обычном варианте и в DnD-реализации.

DnD и внутренние данные

Забота об интересах посетителя всегда важна, но проблемы разработчика также имеют значение. Реализовать «drag and drop» можно не только стандартными средствами, но и посредством обработки событий мышки на элементах страницы.

Задача расчета значений координат тегов и их размеров возникает постоянно. Ручной расчет - хорошая практика, но интерактивный вариант более удобен. Все теги всегда имеют прямоугольную форму и, отслеживая «мышиные» события на сторонах элементов, можно создать возможность автоматического перемещения элементов в нужное место страницы, либо изменения их.

Обработка события нажатия кнопки мышки - запоминание координат места клика, например, одной из сторон элемента. Перемещение мышки - сторона перемещается в нужном направлении. Отпускание кнопки мышки - сторона останавливается, а ее координаты изменяются. Так можно изменить положение элемента или его размер.

Формально это не «drag and drop», но эффект аналогичный и практичный. Сделав универсальные обработчики для любого элемента страницы, можно получить хороший интерактивный результат, ускорить разработку и упростить код.

Визуальное и ручное программирование

Мышка на компьютере и пальцы на смартфоне - совершенно разные подходы к реализации интерфейса пользователя (посетитель, разработчик). Является вполне естественным и современным требование кроссбраузерности.

Все это в совокупности усложняет создание страниц, но применяя идею «drag and drop» в ее стандартной форме, используя ее события, совмещая эту идею с обычными событиями на элементах, можно реализовать механизм, при котором создание страницы будет происходить визуально.

Сейчас давайте рассмотрим выбор элемента или элементов. Факт выбора - появление контекстного меню, например, цель - выравнивание выбранного (слева, справа, по центру), или распределение элементов по вертикали или горизонтали с одинаковым шагом, или изменение их размеров (по минимальному, по максимальному).

Автоматический перерасчет координат и размеров предпочтительнее ручного. Меньше ошибок - быстрее достигается цель. Кроме того, можно сделать станицу в одном браузере, сохранить положение и размеры элементов. Открыв эту страницу на смартфоне, можно поправить значения координат и размеров и запомнить их для конкретной модели смартфона или версии браузера.

Так одна и та же страница без ручного соблюдения требования кроссбраузерности будет иметь различные данные для отображения на различных устройствах и в различных браузерах.

Если позволить посетителю выполнять эти процедуры самостоятельно, а также выбирать нужные элементы страницы из числа предусмотренных разработчиком, можно обеспечить кроссбраузерность и требуемую функциональность страницы с учетом мнения пользователя.

Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.

События Drag&Drop

• dragStart: пользователь начинает перетаскивание элемента.
• dragEnter: перетаскиваемый элемент достигает конечного элемента.
• dragOver: курсор мыши наведен на элемент при перетаскивании.
• dragLeave: курсор мыши покидает пределы перетаскиваемого элемента.
• drag: курсор двигается при перетаскивании.
• drop: происходит drop элемента.
• dragEnd: пользователь отпускает курсор мыши в процессе перетаскивания.

Объект dataTransfer

• dataTransfer.effectAllowed=value: возвращает тип доступного действия - none, copy, copyLink, copyMove, link, linkMove, move, all или uninitialized.
• dataTransfer.setData(format, data): добавляет данные в нужном формате.
• dataTransfer.clearData(format): убирает данные.
• dataTransfer.setDragImage(element, x, y): устанавливает изображение для перетаскивания с координатами курсора (0, 0 - левый верхний угол).
• data = dataTransfer.getData(format): возвращает данные.

Пример Drag&Drop

Начало перетаскивания объекта

Function dragStart(ev) { ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100); return true; }
В первой строке задан возможный тип перетаскивания - move, во второй - устанавливаются данные процесса - тип (Text) и ID. В третьей строке setDragImage определяет положение курсора, в данном случае в середине квадрата 200х200 пикселей.

Завершение перетаскивания объекта

Function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { event.preventDefault(); }

В данном простом примере заданы только основные действия, но можно добавить другие - изменение цвета фона, добавления текста и т.д. Далее - заключительный этап. Здесь задаются действия окончания перетаскивания:

Function dragDrop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; }
Как видно из примера , синие блоки после перетаскивания можно вернуть на исходное место. К счастью, сделать это очень просто. Все функции объявлены, осталось добавить следующий код:

Заключение