Drag and Drop technology in Android. Drag-n-Drop Technique Using jQuery What is drag and drop

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 sphere. 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 is able 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.

V 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 design the user interface in the usual version and in 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 by 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 monitoring 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 button click event - remembering the coordinates of the click location, 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

The mouse on the computer and the fingers on the smartphone - absolutely 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 ​​\u200b\u200bdrag and drop in its standard form, using its events, combining this idea with ordinary events on elements, you can implement a mechanism in which page creation 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 size (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 a specific smartphone model 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, it is possible to ensure cross-browser compatibility and the required functionality of the page, taking into account the user's opinion.

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.

Drag Events

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

Interfaces

The basics

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

identify what is draggable

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

This element is draggable.

For more information, see:

handle the drop effect

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

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.

Basic actions and the most simple examples drag-and-drop actions are: moving an object, moving an object in from panel to panel, although in modern operating systems ah drag-and-drop has become 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 of performing any actions in graphical user interfaces, which implies 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)