Drag-and-drop: способ оперирования элементами интерфейса пользователя. Как использовать функцию «Drag and Drop» на iPad В чем суть технологии drag and drop

Говоря о графическом интерфейсе пользователя нельзя не сказать о технологии Drag and Drop (буквально: Тяни и Бросай ).

Данная технология основана на перетаскивании элементов графического интерфейса из источника в приёмник. Интерфейс доступен только с помощью манипулятора мышь (тачпад, трекбол) или сенсорного экрана.

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

Следует однако отличать интерфейс Drag’n Drop от элементов управления интерфейсом, имеющими в своих методах методы, отвечающие за перемещение, реализуемые тем же способом. Например, окно (форма) имеет возможность перемещения по экрану (перетаскиванием за область заголовка). ScrollBox имеет ползунок прокрутки. Но в обоих примерах перетаскивание является внутренним (для компонента) действием (событием) и никаким образом не влияет на другие объекты системы.

Drag and Drop интерфейс применим только для перемещения объекта из контейнера в контейнер, даже в том случае, если контейнеры разнородные. Например, перетаскивание файла из папки в письмо .

Использование интерфейсов Drag and Drop в веб-технологиях стало прорывом в . Существуют оффлайн Drag and Drop редакторы (например, DreamWeaver) и онлайн (например, любой современный конструктор сайтов.

Для библиотеки VCL фирмой Borland реализована собственная версия интерфейса Drag&Drop (переводится как "перетащить"). Интерфейс этот внутренний - передавать и принимать можно любые управляющие элементы Delphi внутри формы" (кроме самой формы). Он реализован без использования соответствующих функций API Windows - их нужно применять при организации общения с другими задачами путем перетаскивания.

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

CancelDrag Отменяет текущую drag-and-drop или drag-and-dock операцию.

Функция FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Функция возвращает объект базового класса TControl , к которому относится позиция экрана с координатами, определенными параметром Pos. Данная функция используется для определения потенциального получателя drag-and-drop или drag-and-dock операции. Если для указанной позиции не существует никакого оконного средства управления, то функция возвращает nil . Параметр AllowDisabled определяет, будут ли учитываться заблокированные (disabled) объекты.

Функция IsDragObject (Sender: TObject ): Boolean ;

Функция определяет, является ли объект, определенный в параметре Sender, потомком класса TDragObject . Данную функцию можно использовать в качестве параметра Source в обработчиках событий OnDragOver и OnDockOver для того, чтобы определить будет ли принят перетаскиваемый объект. Также функцию IsDragObject можно использовать в качестве параметра Source в обработчиках событий OnDragDrop и OnDockDrop для того, чтобы правильно интерпретировать перетаскиваемый объект.

Свойства DragMode, DragCursor, методы BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, параметр Accept

Процесс перетаскивания с помощью мыши информации из одного объекта в другой широко используется в Widows.Можно перемещать файлы между папками, перемещать сами папки и др.

Все свойства, методы и события, связанные с процессом перетаскивания, определены в классе TControl, являющегося прародителем всех визуальных компонентов Delphi. Поэтому они являются общими для всех компонентов.

Начало перетаскивания определяется свойством DragMode, которое может устанавливаться в процессе проектирования или программно равным dmManual или dmAutomatic. Значение dmAutomatic (автоматическое) определяет автоматическое начало процесса перетаскивания при нажатии пользователем кнопки мыши над компонентом. Однако в этом случае событие OnMouseDown, связанное с нажатием пользователем кнопки мыши, для этого компонента вообще не наступает.

Интерфейс переноса и приема компонентов появился достаточно давно. Он обеспечивает взаимодействие двух элементов управления во время выполнения приложения. При этом могут выполняться любые необходимые операции. Несмотря на простоту реализации и давность разработки, многие программисты (особенно новички) считают этот механизм малопонятным и экзотическим. Тем не менее использование Drag-and-Drop может оказаться очень полезным и простым в реализации. Сейчас мы в этом убедимся.

Для того чтобы механизм заработал, требуется настроить соответствующим образом два элемента управления. Один должен быть источником (Source), второй - приемником (Target). При этом источник никуда не перемещается, а только регистрируется в качестве такового в механизме.

Поверьте, достаточно просто преобразовать X,Y координаты, передаваемые в параметрах событий OnDragOver и OnDragDrop, в координаты формы.

Работайте со свойствами Left и Top компонента, над которым перемещается курсор. Приведу простой пример. Поместите на форму компонент Memo и присвойте свойству Align значение alTop. Поместите на форму панель, также присвойсте свойству Align значение alTop и задайте небольшое значение свойству Height, скажем 6 или 7 пикселей. Установите DragMode на dmAutomatica и DragCursor на crVSplit. Поместите другой Memo-компонент и установите Align на alClient. Одновременно выберите оба Memo-компонента, панель и создайте общий обработчик события OnDragOver как показано ниже:

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

Где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь » или сенсорного экрана .

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

Базовыми действиями и самыми простыми примерами drag-and-drop действий являются: перемещение объекта, перемещение объекта в из панели в панель, хотя в современных операционных системах drag-and-drop получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя.

Объектами для перемещения могут быть следующие элементы интерфейса : значки (иконки) Рабочего стола , плавающие панели инструментов , ярлыки программ в Панели задач (начиная с Win XP), элементы TreeView , текстовая строка, ячейка DataGridView., также элементы OLE . Перемещаться объекты могут как в пределах некоторой определённой области, в пределах одного окна , между панелями одного окна, так и между разными окнами.

Событие перетаскивания должно инициироваться каким-либо действием пользователя. Чаще всего этим действием является нажатие левой кнопки мыши на элементе (событие это называется MouseDown), который может быть перемещен в своем контейнере. Некоторые компоненты обладают собственными событиями начала drag-n-drop - например, TreeView имеет событие ItemDrag.

Wikimedia Foundation . 2010 .

Drag and drop - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [<engl. drag „ziehen“ + and „und“ + drop „fallen… … Universal-Lexikon

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

drag and drop - (computing) To move an icon, file, etc across the screen using a mouse and release it in a different place (dragˈ and dropˈ adjective) Main Entry: drag … Useful english dictionary

drag and drop - IT to move something from one area of a computer screen to another using the mouse: »The software allows you to drag and drop elements for the page images, text, etc. anywhere you want. Main Entry: drag … Financial and business terms

drag-and-drop - UK US verb n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird }