Drag and drop technologies. Drag-and-drop: A way to manipulate user interface elements. Full mousemove code

Use of technology drag and drop (drag and drop) allows the user to move various objects from one to another, for example, elements of one list to another. To do this, you need to use two controls: a sink and a source. The receiver is the object that will receive the source object (movable object).

The events that occur during the movement of objects are listed below in the order in which they occur.

OnStartDrag(type TStartDragEvent) - generated by the source object at the beginning of the operation. Parameters passed to the event handler: DragObject receiver object (TDragObject type), Source object (TObject type).

OnDragOver(type TDragOverEvent) - creates a target object when a floating object is placed above it. Parameters passed to the event handler: Sender receiver object (TObject type), Source source object (TObject type), State movement state (TDragState type), X and Y (integer type) - current coordinates of the mouse pointer, Accept (boolean type ) sign of confirmation of the move operation. The state of movement makes it clear whether the object being moved is in the receiver area, whether it moves in it, left it. The passed parameters allow the receiver object to accept or reject the source object. The Accept parameter is set to Trye if the move operation is accepted, False otherwise.

onDragDrop (type TDragDropEvent) - Raised by the destination object when the dragged object is dropped on it. The event handler is passed the current coordinates of the mouse pointer, the Sender receiver object (TObject type), and the original Source movement object (TObject type).

onEndDrag (type EndDragEvent) - Raised when a drag operation ends. The X and Y coordinates of the point where the Sender source object and the Target receiver object are passed to the event handler.

To create a drag and drop, it is enough to implement two events: OnDragDrop and OnDragOver with the DragMode property set to dmAutomatic. Otherwise, the start of the move operation, the BeginDrag method, must be coded by the programmer.

To consolidate the material, we will create the following application. Place a Panel component on the form. Set the DragMode property of the Object Inspector to dmAutomatic. Select the form object and use the Object Inspector to create the following events:

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); beginPanel1.Left:=X; Panel1.Top:=Y; end;

Now, by running the application and pressing the mouse button over the panel, we can move the panel object throughout the form.

Conclusion: we got acquainted with the technology drag and drop(drag and drop) and used it in practice.

It's easier to take something and put it than to write what you need to take and where to put it. Of course, without a mouse, or a similar device, you can’t select or specify anything, but even in the current state of things, using the drag and drop idea is very natural and comfortable.

The scope of the idea is not only online stores, digital libraries, search or Information Systems, but also the applied area. The idea is very applicable in the development of sites and their elements, created and maintained interactively, without the participation of a programmer.

Description of the idea

Select, move and put - the idea is natural and convenient. It is simply amazing that it was not born when the mouse became an indispensable accessory for the computer.

The most obvious example is choosing a product in an online store. Select the desired product with the mouse and drag it to the shopping cart - simply, naturally and conveniently. File Upload: Taking a document outside of the browser window and placing it on a page element, thus initiating the transfer of the document to the server, is also a practical idea.

For the developer, the idea of ​​"drag and drop" is the manipulation of page elements without manually recalculating the coordinates and sizes of tags, the ability to select multiple elements and align them, and move the sides of block tags.

HTML and CSS are excellent languages ​​for describing tags and styling them, but when a developer has the ability to interactively manipulate page elements without manually recalculating coordinates and sizes, this makes the work more comfortable and efficient.

Easy file transfer

"Drag and drop": translation from English into Russian literally sounds like "drag and drop." In practice, it sounds and works better: chose, transferred and let go - simply and naturally.

Implementing file transfers on a page to a page, to a server, or for other use is very simple.

IN this example Several files on the desktop were selected with the mouse (left figure). On the selection, the left mouse button was pressed and the selected "went" to the basket. The browser itself showed how this happens, wrote a “copy” hint and created the outlines of the files being moved around.

When the mouse was over the basket, the visitor released left button mouse, the drag and drop event took place and on the site page (bottom image), the JavaScript code was able to receive and process all the files that the visitor provided to the page (site).

Implementation Description

The code that performs this procedure is very simple. Even a novice developer can repeat it in any use cases.

Here, the user interface is represented by two tags: scPlaceFile (this is the basket itself where you want to put files) and scPlaceFiles (this is the result of processing files, in this case a list of them).

The logic of the page is as follows. When the page is loaded in the browser, the "ondrop" event handler is assigned in the basket - put, the rest of the events are blocked and not used.

The page works normally, but as soon as the visitor selects the file (files) and drags them to the basket image, that is, to the scPlaceFile tag, the “files have arrived” event will be processed.

This handler simply displays a list of files. Their number is in event.dataTransfer.files.length, and information about each file is in event.dataTransfer.files[i].name. What to do with the received data is determined by the developer, in this case, a list of received files is simply formed.

Once processed, the event is blocked and not propagated. This is necessary so that the browser does not engage in amateur activities and does not interfere with the processing of the information received.

DnD and external data

Uploading images to the server in "drag and drop" is a common practice in this technology. Typically, a developer creates a file upload form (1) that works in the usual way (2). The visitor can normally select files and upload them.

However, if a visitor drags and drops to a certain place in the form, then the file name field (files) will be filled in automatically.

This good decision. It is, of course, very difficult to admit that there is no mouse on the computer. But it is better to develop the user interface in the usual way and in the DnD implementation.

DnD and internal data

Taking care of the interests of the visitor is always important, but the concerns of the developer also matter. You can implement "drag and drop" not only standard means, but also by handling mouse events on page elements.

The task of calculating tag coordinate values ​​and their sizes arises constantly. Manual calculation is good practice, but the interactive option is more convenient. All tags are always rectangular in shape, and by tracking mouse events on the sides of elements, you can create the ability to automatically move elements to the right place on the page, or change them.

Handling the mouse click event - remembering the coordinates of the click site, for example, one of the sides of the element. Move the mouse - the side moves in the desired direction. Releasing the mouse button - the side stops and its coordinates change. This way you can change the position of the element or its size.

It's not formally drag and drop, but the effect is similar and practical. By making universal handlers for any page element, you can get a good interactive result, speed up development and simplify the code.

Visual and manual programming

A mouse on a computer and fingers on a smartphone are completely different approaches to the implementation of the user interface (visitor, developer). It is a completely natural and modern requirement for cross-browser compatibility.

All this together complicates the creation of pages, but applying the idea of ​​"drag and drop" in its standard form, using its events, combining this idea with the usual events on elements, you can implement a mechanism in which the creation of the page will occur visually.

Now let's look at the selection of an element or elements. Selection fact - the appearance of a context menu, for example, the goal is to align the selected one (left, right, center), or distribute elements vertically or horizontally with the same step, or change their sizes (minimum, maximum).

Automatic recalculation of coordinates and dimensions is preferable to manual. Fewer mistakes - the goal is reached faster. In addition, you can make a page in one browser, save the position and size of elements. By opening this page on a smartphone, you can correct the coordinates and dimensions and remember them for specific model smartphone or browser version.

So the same page without manual compliance with the cross-browser compatibility requirement will have different data to display on various devices and in different browsers.

If you allow the visitor to perform these procedures on their own, as well as select the necessary page elements from among those provided by the developer, you can ensure cross-browser compatibility and the required functionality of the page, taking into account the user's opinion.

Where GUI elements are implemented using pseudographics) using the mouse or touch screen.

The method is implemented by "capturing" (by pressing and holding the main ( first, more often the left) mouse button) of an object displayed on the computer screen, programmatically available for such an operation, and moving it to another place (to change the location) or “throwing” it onto another element (to call the corresponding action provided by the program). In relation to windows (also capable of being moved in a similar way), this term is usually not used.

The basic actions and the simplest examples of drag-and-drop actions are: moving an object, moving an object in from panel to panel, although in modern operating systems drag-and-drop has been widely used and is one of the main ways to interact with a computer in a graphical user interface.

The following interface elements can be objects for moving: Desktop icons (icons), floating toolbars, program shortcuts in the Taskbar (starting with Win XP), TreeView elements, text string, DataGridView cell., also OLE elements. Objects can move both within a certain area, within one window, between panels of one window, and between different windows.

The drag event must be triggered by some user action. Most often, this action is a left mouse button press on an element (this event is called MouseDown), which can be moved in its container. Some components have their own drag-n-drop start events - for example, the TreeView has an ItemDrag event.

Wikimedia Foundation. 2010 .

See what "Drag-and-drop" is in other dictionaries:

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

The form for performing any action in graphical interfaces user, implying the use computer mouse. Translated from English means literally: drag and drop. The action is performed by operating on the visible on the screen ... ... Glossary of business terms

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)