Метод drag and drop заключается в возможности. Создаем простой HTML5 “drag & drop” интерфейс. Как перетащить текст из одного приложения в другое

Использование технологии перетаскивания (drag and drop ) дает возможность пользователю перемещать различные объекты из одного в другой, например, элементы одного списка в другой. Для этого необходимо использовать два элемента управления: приемник и источник. Приемником считается тот объект, который примет объект источник (перемещаемый объект).

События, возникающие в процессе перемещения объектов, перечислены ниже в том порядке в каком они возникают.

OnStartDrag (тип TStartDragEvent) - в начале выполнения операции генерируется объектом-источником. Параметры, которые передаются обработчику событий: объект приемник DragObject (тип TDragObject), объект-источник Source (тип TObject).

OnDragOver (тип TDragOverEvent) - создает объект-приемник, когда над ним оказывается перемещаемый объект. Параметры, которые передаются обработчику событий:объект-приемник Sender (тип TObject), объект-источник Source (тип TObject), состояние перемещения State (тип TDragState), X и Y (тип integer) - текущие координаты указателя мыши, Accept (тип boolean) признак подтверждения операции перемещения. Состояние перемещения дает понять находиться ли перемещаемый объект в области приемника, передвигается ли в ней, покинул ее. Переданные параметры дают возможность объекту-приемнику принять или отклонить объект-источник. Параметр Accept устанавливается в значение Trye если операция перемещения принята, в противном случае - False.

onDragDrop (тип TDragDropEvent) - создается объектом-приемником, когда перемещаемый объект опускается на нем. Обработчику события передаются текущие координаты указателя мыши, объект приемник Sender (тип TObject), исходный объект перемещения Source (тип TObject).

onEndDrag (тип EndDragEvent) - создается при завершении операции перетаскивания. Передаются обработчику события координаты X и Y точки, где оказался объект-источник Sender и объект приемник Target.

Для создания перетаскивания достаточно реализовать два события: OnDragDrop и OnDragOver при установленном свойстве DragMode равном dmAutomatic. В противном случае начало операции перемещения, метод BeginDrag, необходимо программисту закодировать.

Для закрепления материала создадим следующее приложение. На форму поместим компонент Panel. В свойстве DragMode Инспектора Объектов установим значение dmAutomatic. Выделим объект форма и с помощью Инспектора Объектов создадим нижеследующие события:

Procedure TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); begin if Source = Panel1 then Accept:= True else Accept:= False; end; procedure TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); begin Panel1.Left:= X; Panel1.Top:= Y; end;

Теперь запустив приложение и нажав над панелью кнопку мыши мы можем перемещать объект панель по всей форме.

Итог: мы познакомились с технологией перетаскивания (drag and drop) и использовали ее на практике.

Проще всего что-то взять и положить, чем писать, что нужно взять и куда положить. Конечно без мышки, или подобного ей устройства, ничего не выберешь и ничего не укажешь, но даже в текущем положении вещей использование идеи «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. Что делать с полученными данными, определяет разработчик, в данном случае просто формируется список полученных файлов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Методы работы с техникой "перетащи и брось" складывались в течение многих лет. Неудивительно, что с увеличением числа программистов, разрабатывающих плагины с открытым исходным кодом (например, для jQuery) вновь возрождаются старые методы. Библиотека для JavaScript весьма адаптивна и предлагает множество улучшений в нашу эпоху веб технологий.

В данном уроке мы сделаем скрипт, который можно будет использовать для создания динамических прямоугольников с техникой "перетащи и брось" на своем веб сайте. Процесс управляется jQuery. Такие скрипты сохраняют время, предоставляя готовый функционал! А библиотеку "перетащи и брось" можно будет использовать в других проектах.

Первым делом подготовим небольшой сайт для проекта. В папке проекта нужно создать два каталога с примечательными именами"js" и "css" и пустой файл index.html . Код будет очень простой, чтобы сложилось четкое представление о работе, и появилась точка для дальнейшего развития.

Ниже приводится код нашего HTML файла. В разделе head мы включаем 3 скрипта. Основной скрипт jQuery будет подгружаться с сервера Google Code . также подключается наш файл стилей style.css , который содержит основные свойства для формирования внешнего вида нашего документа.

Перетащи меня Да-да. Именно меня. Меня тоже можно перетащить { zIndex: 200, opacity: .9 }

P.S.: меня можно бросить где угодно!

Внутри раздела body помещены только два блока div , которые содержат оба прямоугольника. Код достаточно простой и понятный. Внутри каждого прямоугольника размещены заголовки с классами handler и handler2 . Это важно, так как при перетаскивании каждый прямоугольник ведет себя по-своему.

Код HTML очень прост. Если вам понятна основная разметка, то и стили CSS также не будут представлять сложности. В основном определяются поля, отступы и цвета.

Body,html { font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; } p { height:30px; }

Селекторы body,html используются только для демонстрационной страницы. А весь контент размещается в двух перетаскиваемых прямоугольниках.

Dv1 { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; } .dv1 h2 { background-color:#b2d3f5; padding:5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; } .dv1 div { padding:5px; margin-bottom:10px; } .dv2 { background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; } .dv2 h2 { background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; } .dv2 .content2 { padding:5px; margin-bottom:10px; }

Для обоих классов.dv1 и.dv2 мы используем абсолютное позиционирование. В этом нет необходимости и, вероятно, это не самый лучший способ для позиционирования перетаскиваемых прямоугольников. Однако для нашего примера такое позиционирование имеет смысл, так как при каждом обновлении страницы прямоугольники устанавливаются в определенные места.

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

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

Два файла JavaScript содержат весь необходимый для работы код. Опустим детали работы с jQuery, так как это выходит за рамки урока. Обратим внимание на файл jquery.dragndrop.js .

На строке 22 происходит определение функции Drags .

$.fn.Drags = function(opts) { var ps = $.extend({ zIndex: 20, opacity: .7, handler: null, onMove: function() { }, onDrop: function() { } }, opts);

Здесь устанавливается возвращаемая переменная и данные инициализации для Drags . Такой способ очень широко используется при работе с jQuery для передачи опций другим функциям. Внутри мы устанавливаем переменные для всех доступных опций для перетаскиваемых прямоугольников.

Следующая часть кода включает обработчики событий для переменной dragndrop . Оба события drag и drop вызывают функции с передачей параметров события в них. Данные события происходят, когда вы нажимаете кнопку мыши, чтобы перетащить объект, а затем отпускаете ее.

Var dragndrop = { drag: function(e) { var dragData = e.data.dragData; dragData.target.css({ left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop }); dragData.handler.css({ cursor: "move" }); dragData.target.css ({ cursor: "move" }); dragData.onMove(e); }, drop: function(e) { var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css({ "opacity": "" }); dragData.handler.css("cursor", dragData.oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); } }

Наши функции манипулируют CSS позиционированием каждого объекта. Если изменить абсолютное позиционирование ваших объектов, то это не повлияет на работу кода, так как каждая функция JavaScript изменяет любой стиль, который определен для объекта.

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

Во втором файле fn.js содержится совсем простой код. Мы дожидаемся полной загрузки документа, после чего вызываем наши функции. Определяются два экземпляра функции Drags , которая разбиралась ранее.

У нас есть два перемещаемых блока с классами.dv1 и.dv2 . Если нужно оставить один перемещаемый блок, то нужно просто удалить вторую часть кода. Добавление еще одного перемещаемого блока также осуществляется просто. Нужно только добавить новую функцию в данном файле.

Первым делом нужно установить опции при вызове функции. Обязательно надо установить имя обработчика. C его помощью мы сообщаем jQuery, какой обработчик использовать при нажатии кнопки мыши в определенной области документа. В качестве имени обработчика может быть класс или атрибут ID.

В нашей первой функции есть два обработчика событий onMove и onDrop . Оба вызывают новые функции, передаваемые в текущее событие как переменные. Здесь выполняется манипулирование кодом HTML в прямоугольнике для обновления при каждом движении. Это замечательный эффект для демонстрации того, как можно осуществлять управление процессом с помощью простых событий jQuery.

Во второй функции мы используем параметры z-Index и opacity . Можно добавить и другие свойства CSS? но для этого потребуется переработать код JavaScript, чтобы осуществлялась проверка установок. Например, можно передавать другой стиль шрифта или значения для высоты и ширины для перемещаемого прямоугольника - получится очень интересный трюк!

В результате небольшой работы мы получили в свое распоряжение замечательный интерфейс с функцией "перетащи и брось". jQuery предоставляет огромные преимущества для разработчиков, которые жаждут использовать в своих проектах старые методы.

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

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

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.

For web sites, extensions, and XUL applications, you can customize which elements can become draggable , the type of feedback the draggable elements produce, and the droppable elements.

This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.

Note: Neither dragstart nor dragend events are fired when dragging a file into the browser from the OS.

This section is a summary of the basic steps to add drag-and-drop functionality to an application.

Making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample:

function dragstart_handler(ev) { // Add the target element"s id to the data transfer object ev.dataTransfer.setData("text/plain", ev.target.id); } window.addEventListener("DOMContentLoaded", () => { // Get the element by id const element = document.getElementById("p1"); // Add the ondragstart event listener element.addEventListener("dragstart", dragstart_handler); });

This element is draggable.

For more information, see:

The handler for the drop event is free to process the drag data in an application-specific way.

Typically, an application uses the getData() method to retrieve drag items and then process them accordingly. Additionally, application semantics may differ depending on the value of the