Creating a simple HTML5 “drag & drop” interface. Drag-and-drop: a way to operate user interface elements 13 drag and drop technology

182

In this example, we select a div element and make it movable by calling the draggable() method on it. As shown in the figure below, in the opened document the element takes its usual position, but after that it can be moved using the mouse pointer to any place in the browser window:

The ability to drag and drop elements is useful on its own, but it's even more useful when used in conjunction with the Droppable interaction, which is described next.

Draggable interaction is achieved solely through the use of specific HTML markup and CSS styles. This means that this functionality will work in almost any browser, but the elements endowed with it will not be able to work with similar native drag-and-drop tools operating systems.

Drag-and-drop operations defined by the HTML5 specification are typically implemented using native operating system mechanisms. If you are using the jQuery UI Drag-and-drop mechanism, then it is better to disable the equivalent HTML5 features to avoid conflicts. To do this, set the draggable attribute of the body element of the document to false.

Setting up the Draggable interaction

There are many customization options for Draggable interactions. The most important properties, which are discussed in the following sections, are shown in the table below:

Draggable interaction properties Property Description

axis	Limits the ability to move in certain directions. The default value is false, which means no constraint, but you can also specify a value of "x" (move along the X axis only) or "y" (move along the Y axis only)
containment	Limits the location of the element being moved to a specific area of ​​the screen. The types of supported values ​​are described in the table below, using the corresponding example. The default value is false, which means no restrictions
delay	Specifies how long an element must be dragged before it moves. The default value is 0, which means no delay
distance	Defines the distance the user must drag an element from its starting position before it actually moves. Default value is 1 pixel
grid	Forces the snapping of the moved element to the grid cells. The default value is false, which means no binding

Limiting movement directions

There are several ways you can restrict an element's movement to certain directions. The first is to use the axis option, which allows you to restrict the direction of movement to the X or Y axis. An example of this is shown below:

... div.dragElement (font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px ) $(function() ( $ (".dragElement").draggable(( axis: "x")).filter("#dragV").draggable("option", "axis", "y"); )); Drag vertically Drag horizontally Run example

In this example, we define two div elements, select them using jQuery, and call the draggable() method. As an argument to this method, we pass an object that initially restricts the movement of both div elements to the direction along the X axis. By then using the jQuery filter() method, we are able to select the dragV element without jQuery searching the entire document again and set it to a different allowed movement direction - along the Y axis. Thus, we get a document in which one div element can only be dragged in the vertical direction, and the other - only in the horizontal direction. The result is shown in the figure:

Limiting the allowable area of ​​element movement

You can also limit the area of ​​the screen where you can drag an item. To do this, use the containment option. The value formats that can be specified in this option are described in the table below:

An example of using the containment option is given below:

... div.dragElement (font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px ) #container ( border: medium double black; width: 700px; height: 450px) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " axis", "x"); )); Drag horizontally Drag inside parent Run example

In this example, both elements are limited in their ability to move so that they can only be dragged within their parent element, which is a fixed-size div. One of the divs being floated has the additional constraint of being floated using the axis option in that it can only move horizontally within its parent. The result is illustrated in the figure:

Limiting the ability to move an element to grid cells

The grid option allows you to set the binding of the moved element to grid cells. This option takes as a value an array of two elements specifying the width and height of the grid cells in pixels. An example of using the grid option is given below:

... #draggable (font-size: x-large; border: thin solid black; width: 5em; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( ( grid: )); )); Drag me Run example

This example specifies a grid with cells 100 pixels wide and 50 pixels high. When you drag an element, it "jumps" from one (invisible) cell to another. The snapping effect is a great example of how interaction functionality can be used, but it's difficult to convey using screenshots.

You can create a snap effect for only one direction by setting the free movement axis to 1. For example, if you set the grid option to , the element will snap to 100 pixel wide grid cells when moved horizontally, but will move freely vertically.

Move delay

There are two options that allow you to delay the dragging of a moving element. The delay option allows you to specify the amount of time, in milliseconds, that the user must drag the mouse pointer before the element is actually moved. Another kind of delay is provided by the distance option, which specifies the distance in pixels that the user must drag the mouse pointer before it is followed by an element.

An example of using both settings is given below:

... #time, #distance (font-size: large; border: thin solid black; padding: 10px; width: 120px; text-align: center; background-color: lightgray; margin: 4px; ) $(function( ) ( $("#time").draggable(( delay: 1000 )) $("#distance").draggable(( distance: 150 )) )); Block with time delay Block with minimum distance Run example

In this example there are two moveable elements, one of which is delayed using the delay option, and the other is delayed using the distance option.

In the case of a delay, specified by the delay option, the user must drag for a specified amount of time before it actually moves the element. In this example, the duration of this period is 1000 ms. It is not necessary to move the mouse at this time, but throughout the entire delay period the mouse button must remain pressed, after which the element can be moved by moving the mouse. After the delay time has elapsed, the element being moved will snap to the mouse pointer location, subject to the constraints imposed by the grid, region, and axis options discussed earlier.

The distance option has a similar effect, but in this case the user must drag the mouse pointer at least a specified number of pixels in any direction from the element's starting location. The element being moved will then jump to the current pointer location.

If you apply both settings to the same element, the moved element will not move until both delay criteria are met, i.e. until an attempt to drag an element lasts for a specified amount of time and until the mouse pointer moves a specified number of pixels.

Using Draggable interaction methods

All of the methods defined for Draggable interaction are part of the set of base methods you've already seen when looking at widgets. There are no methods specific to Draggable interaction, so we won't cover them in detail. The list of available methods is given in the table below:

Using Draggable Interaction Events

Interaction Draggable supports a simple set of events that notify you when an element is dragged. These events are described in the table below:

As with widget events, these events can also be responded to. An example of handling the start and stop events is given below:

... #draggable (font-size: x-large; border: thin solid black; width: 190px; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Drag me..."), stop: function() ( $("#draggable").text("Drag me") ) )) ; )); Drag me Run example

This example uses the start and stop events to change the text content of an element as it is dragged. This advantage is due to the fact that Draggable's interaction is implemented entirely using HTML and CSS: you can use jQuery to change the state of a draggable element even as it moves across the screen.

Using Droppable Interaction

Dragging an element alone may be sufficient in some situations, but it is most useful when used in conjunction with the Droppable interaction.

Elements to which the Droppable interaction has been applied (receiving elements) gain the ability to accept movable elements created using the Draggable interaction.

Receiving elements are created using the droppable() method, but to get useful functionality you will need to create event handlers from among those defined for this type of interaction. Available events are shown in the table below:

Droppable interaction events Event Description

create	Occurs when a Droppable interaction is applied to an element
activate	Occurs when the user begins to drag the element being moved
deactivate	Occurs when the user stops dragging the element being moved
over	Occurs when the user drags a floatable element over a receiving element (provided the mouse button has not yet been released)
out	Occurs when the user drags the element being moved outside of the receiving element
drop	Occurs when the user leaves the element being moved on the receiving element

An example of creating a simple receiving element for which a single drop event handler is defined is given below:

... #draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20px; position: absolute; right: 5px;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Left") ) )); )); Leave me here Drag me Run example

This example adds a div element to the document whose text content is represented by the string "Leave here." We select this element using jQuery and call the droppable() method, passing it a settings object that defines a handler for the drop event. The response to this event is to change the text of the element being moved using the text() method.

The Drag-and-drop interaction created in this example is a simple one, but it provides a useful context for explaining how the Draggable and Droppable interactions work together. The various stages of the process of dragging elements are illustrated in the figure:

It all looks very simple. We drag the element being moved until it is above the receiving element and release it. The element that is dropped remains where it was left, and its text content changes in response to the drop event. The following sections show how to use other Droppable interaction events to improve the user experience.

Illumination of target receiving object

Using the activate and deactivate events, you can highlight the target receiving object when the user begins the process of dragging an element. In many situations, this idea is very fruitful because it provides the user with reliable guidance as to which elements are part of the drag-and-drop model. A corresponding example is given below:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left ") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ...Run example

As soon as the user starts dragging an element, the activate event associated with our receiving element is fired, and the handler function uses the css() method to change the border and background-color CSS properties of that element. As a result, the target receiving element is highlighted, indicating to the user that there is a connection between it and the element being moved.

The deactivate event is used to remove CSS property values ​​from the receiving element and return it to its original state as soon as the user releases the mouse button. (This event occurs whenever dragging an element stops, regardless of whether the element being dragged is left on the receiving element or not.) This process is illustrated in the figure:

Handling overlapping elements

Drag-and-drop technology can be improved by adding over and out event handling. The over event occurs when 50% of the element being moved is over any part of the receiving element. The out event occurs when previously overlapping elements no longer overlap. An example of the response to these events is given below:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Run example

The same handler functions are used here as in the previous example, but in this case they are associated with the over and out events. When the receiving element overlaps at least 50% of the element being moved, it is enclosed in a frame and its background color changes, as shown in the figure:

This 50% limit is called the overlap threshold (tolerance), the value of which can be set when creating the receiving element, as will be shown later.

Setting up Droppable interactions

The Droppable interaction has a number of properties that you can change to customize its behavior. These properties are listed in the table below:

Droppable Interaction Properties Property Description

disabled	If this option is true, then the Droppable interaction functionality is initially disabled. Default value is false
accept	Narrows down the set of movable elements that the receiving element will respond to. The default value is *, which matches any element
activeClass	Defines a class that will be assigned in response to the activate event and removed in response to the deactivate event
hoverClass	Defines a class that will be assigned in response to an over event and removed in response to an out event
tolerance	Defines the minimum degree of overlap at which an over event occurs

Limiting the allowed elements to be moved

You can limit the set of droppable elements that will be accepted by an element with Droppable interoperability functionality by using the accept option. The value of the accept option should be set to a selector. As a result, Droppable interaction events will only occur if the element being moved matches the specified selector. A corresponding example is given below:

... .draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20px; position: absolute; right: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Left") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function () ( $("#droppable").css("border", "").css("background-color", ""); ), accept: "#drag1" )); )); Leave here Element 1 Element 2 Run example

In this example there are two draggable elements with IDs drag1 and drag2. When creating a receiving element, we use the accept option, with which we indicate that only the drag1 element will be an acceptable element to be moved.

When you drag the drag1 element, you will see the same effect as in the previous examples. At appropriate times, the activate, deactivate, over, and out events will be fired for the receiving element. At the same time, if you drag a drag2 element that does not match the selector specified in the accept parameter, then these events will not be fired. This element can be moved freely, but it will not be perceived by the receiving element.

Notice the change in how we select an acceptable floatable element on which to call the text() method. When there was only one moving element in the document, the id attribute was enough for this:

Drop: function() ( $("#draggable").text("Left") ),

In this example there are two elements to be moved, and selecting by id attribute will not give desired result, since the text in this case will always change in the same floated element, regardless of which one is acceptable for the receiving element.

The solution is to use the ui object, which jQuery UI provides as an additional argument to each event handler. The draggable property of a ui object returns a jQuery object containing the element that the user drags or tries to drop on the target element, allowing the desired element to be selected like this:

Drop: function(event, ui) ( ui.draggable.text("Left") ),

Changing the overlap threshold

By default, the over event only occurs when at least 50% of the element being moved overlaps the receiving element. The amount of this threshold overlap can be changed using the tolerance option, which can take the values ​​shown in the table below:

The two values ​​I use most often are fit and touch because they make the most sense to users. I use fit when the dragged element needs to remain in the area of ​​the receiving element it was moved to, and touch when the dragged element needs to return to its original position (an example will be given below). An example of using the fit and touch parameters is given below:

The clone value tells jQuery UI to create a copy of the element being moved, along with all its contents, and use the resulting result as a helper element. The result is shown in the figure:

The helper element is removed when the user releases the mouse button over the element being moved, leaving the element being moved and the receiving element in their original positions.

As shown in the figure, the original element being moved remains in place and only the auxiliary element moves around the screen following the mouse pointer. If the size of the moved element is large, as in our example, then it covers the rest of the document elements, so that it will be difficult for the user to even track the position of the receiving element. This problem can be dealt with by providing the function as the value of the helper option, as shown in the example below:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Run example

When the user starts dragging an element, jQuery UI calls the function specified by the helper parameter and uses the returned element as the object to be dragged. In this case, I'm using jQuery to create the img element. The result is shown in the figure:

A small image acts as a proxy for the element being moved, making it much easier to keep track of other elements in the document.

The ui object that jQuery UI passes to Droppable interaction events contains a helper property, and this property can be used to manipulate the helper as it is being dragged. An example of using this property in conjunction with the over and out events is given below:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Here the over and out events and the ui.helper property are used to display a border around the helper element when it overlaps the receiving element. The result is shown in the figure:

Snap to element edges

Using the snap option, you can ensure that the moved element is “attracted” to the edges of the elements next to which it passes. This option accepts a selector as a value. The element being moved will snap to the edges of any element matching the specified selector. An example of using the snap option is given below:

Run jQuery UI example #snapper, .draggable, .droppable (font-size: large; border: medium solid black; padding: 4px; width: 150px; text-align: center; background-color: lightgray; margin-bottom: 10px ;).droppable (margin-right: 5px; height: 50px; width: 120px) #dropContainer (position: absolute; right: 5px;) div span (position: relative; top: 25%) .droppable.active (border: medium solid green) .droppable.hover (background-color: lightgreen) #snapper (position: absolute; left: 35%; border: medium solid black; width: 180px; height: 50px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); Cart Snap here Drag me

When a moving element approaches one of the suitable elements, it is, as it were, “attracted” to it in such a way that their adjacent edges touch. For such a binding, you can select any element, not just the receiving element. In this example, I added a div element and set the snap option to a value that selects that element as well as the receiving element in the document.

There are a couple of helper options that allow you to more precisely customize the anchoring behavior of elements. One of them is the snapMode option. With its help you can specify the type of binding. The following values ​​are allowed: inner(snap to the inner edges of elements), outer(snap to the outer edges of elements) and both(snap to all edges; default).

The snapTolerance option allows you to specify how far the floated element must approach the edge of the target element before snapping occurs. The default value is 20, which means 20 pixels. The example uses a value of 50, which corresponds to a snap at a greater distance. It is very important to choose the correct value for this option. If the snapTolerance value is too low, the user may not notice the snapping effect, and if it is too high, the element being moved will begin to make unexpected jumps, snapping to distant elements.

Drag and drop techniques have evolved over many years. It's no surprise that with the increasing number of programmers developing open-source plugins source code(for example, for jQuery) old methods are revived again. The JavaScript library is highly responsive and offers many improvements in this era of web technology.

In this tutorial we will make a script that you can use to create dynamic drag and drop rectangles on your website. The process is managed by jQuery. Such scripts save time by providing ready-made functionality! And the drag-and-drop library can be used in other projects.

Preparing content

First of all, let's prepare a small website for the project. In the project folder you need to create two directories with the notable names "js" and "css" and empty file index.html. The code will be very simple, so that there is a clear idea of ​​the work, and there is a point for further development.

Below is the code for our HTML file. In chapter head we include 3 scripts. The main jQuery script will be loaded from the Google Code server. our style file style.css is also included, which contains the main properties for forming appearance our document.

Drag me Yes, yes. Exactly me. You can drag me too ( zIndex: 200, opacity: .9 )

P.S.: you can leave me anywhere!

Inside section body only two blocks are placed div, which contain both rectangles. The code is quite simple and understandable. Inside each rectangle there are headers with the classes handler and handler2 . This is important because each rectangle behaves differently as you drag.

Installing CSS

The HTML code is very simple. If you understand the basic markup, then CSS styles will also not present any difficulties. Mainly defined margins, paddings and colors.

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

Selectors body,html are used only for the demo page. And all the content is placed in two draggable rectangles.

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; )

For both classes .dv1 and .dv2 we use absolute positioning. This is not necessary and probably not the most The best way to position draggable rectangles. However, for our example, this positioning makes sense, since each time the page is refreshed, the rectangles are installed in certain places.

Also the fonts and colors are different for the rectangles to make it easier to see the difference.

Otherwise, the headings and content of the blocks are almost identical. If you will be copying styles into your project, change the names before starting. In some cases, it makes more sense to use IDs instead of classes, such as when using the drag-and-drop technique for one specific block.

Parsing JavaScript

Two JavaScript files contain all the code needed to make it work. We will omit the details of working with jQuery, as this is beyond the scope of the lesson. Let's pay attention to the jquery.dragndrop.js file.

Line 22 defines the Drags function.

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

This sets the return variable and initialization data for Drags. This method is very commonly used when working with jQuery to pass options to other functions. Internally we set variables for everyone available options for draggable rectangles.

The next piece of code includes event handlers for the dragndrop variable. Both events drag And drop call functions passing event parameters to them. These events occur when you press the mouse button to drag an object and then release it.

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); ) )

Our functions manipulate the CSS positioning of each object. Changing the absolute positioning of your objects will not affect how your code works, since every JavaScript function changes whatever style is defined for the object.

The rest of the code checks the handler and makes cosmetic changes to other styles. Here you can add changes to transparency, font and font color, or add new paragraphs.

Drag/Drop functions

The second fn.js file contains very simple code. We wait until the document is completely loaded, after which we call our functions. Two instances of the function are defined Drags, which was discussed earlier.

We have two movable blocks with classes .dv1 and .dv2 . If you need to leave one moveable block, then you just need to remove the second part of the code. Adding another moveable block is also easy. You just need to add new feature in this file.

The first step is to set the options when calling the function. Be sure to set the handler name. With it, we tell jQuery which handler to use when the mouse button is pressed in a certain area of ​​the document. The handler name can be a class or an ID attribute.

Our first function has two event handlers onMove and onDrop. Both call new functions that are passed to the current event as variables. This is where the HTML code in the rectangle is manipulated to update with each movement. This is a great effect for demonstrating how you can control a process using simple jQuery events.

In the second function we use the z-Index and opacity parameters. Can you add other CSS properties? but this will require reworking the JavaScript code so that settings are checked. For example, you can pass a different font style or values ​​for the height and width of a moving rectangle - a very interesting trick!

Conclusion

With a little bit of work, we now have a great drag-and-drop interface at our disposal. jQuery provides huge benefits for developers who are eager to use old methods in their projects.

As a result, we not only have event handler functions, but we can also pass new variables to draggable blocks. This opens up new possibilities for creativity. The demonstration for the lesson contains only a sketch of what can be done using such code.

So check out the jQuery documentation to use the library functions.

It’s easier to take something and put it down than to write what needs to be taken and where to put it. Of course, without a mouse or similar device, you can’t select anything 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 far from only online stores, electronic libraries, search engines or Information Systems, and also the applied sphere. The idea is very applicable in the development of websites and their elements, created and maintained interactively, without the participation of a programmer.

Description of the idea

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

The most obvious example is choosing a product in an online store. Taking the desired product with your mouse and dragging it into the shopping cart is simple, natural and convenient. Uploading files: Taking a document outside the browser window and placing it on a page element, thereby triggering the document to be transferred to the server, is also a practical idea.

For a developer, the idea of ​​“drag and drop” is to manipulate page elements without manually recalculating the coordinates and sizes of tags, the ability to select multiple elements and align them, as well as 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 released - simple and natural.

It is very simple to implement file transfer on a page to a page, to a server, or for other use.

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 hint “copying” and created outlines of the moved files around it.

When the mouse was over the basket, the visitor released the left mouse button, the “drag and drop” event took place and on the site page (bottom picture) 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 case.

Here the user interface is represented by two tags: scPlaceFile (this is the basket itself where you need 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 a page is loaded in the browser, the “ondrop” event handler is assigned to the basket - put, other events are blocked and not used.

The page works as usual, but as soon as the visitor selects a file (files) and drags them to the cart image, that is, to the scPlaceFile tag, processing of the “files have arrived” event will be triggered.

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 generated.

After processing, 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 received information.

DnD and external data

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

However, if a visitor drags and drops a specific place on the form, the file(s) name field 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 version and in the DnD implementation.

DnD and internal data

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

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

Handling the mouse click event - remembering the coordinates of the click location, for example, one of the sides of the element. Moving 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.

Formally, this is not “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

Mouse on the computer and fingers on the smartphone - absolutely different approaches to the implementation of the user interface (visitor, developer). The requirement for cross-browser compatibility is quite natural and modern.

All this together makes the creation of pages more difficult, but by applying the idea of ​​“drag and drop” in its standard form, using its events, combining this idea with ordinary events on elements, it is possible to implement a mechanism in which page creation will occur visually.

Now let's look at selecting an element or elements. The fact of selection is the appearance of a context menu, for example, the goal is to align the selected (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 recalculation. Fewer mistakes mean the goal is achieved faster. In addition, you can create a page in one browser, saving the position and size of the elements. By opening this page on your smartphone, you can correct the coordinates and dimensions and remember them for a specific smartphone model or browser version.

So the same page without manually complying with the cross-browser requirement will have different data displayed on various devices and in various browsers.

By allowing the visitor to carry out these procedures independently, and also to select the necessary page elements from 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.

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: sink and source. The receiver is the object that will receive the source object (the object being moved).

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

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

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

onDragDrop (type TDragDropEvent) - generated by the receiver 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 movement object Source (TObject type).

onEndDrag (EndDragEvent type) - Raised when a drag operation completes. The X and Y coordinates of the point where the source Sender object and the receiver Target 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 drag operation, the BeginDrag method, must be coded by the programmer.

To consolidate the material, we will create the following application. Place the Panel component on the form. Set the DragMode property of the Object Inspector to dmAutomatic. Let's 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); begin Panel1.Left:= X; Panel1.Top:= Y; end;

Now by launching the application and clicking the mouse button above the panel, we can move the panel object throughout the form.

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