The HTML5 drag-and-drop (DnD) API means that almost any element on a page can become draggable. In this article, we'll cover the basics of drag and drop.
Create draggable content
It's worth noting that in most browsers, text selections, images, and links are draggable by default. For example, if you drag the Google logo on Google Search, you will see a ghost image. The image can then be dragged and dropped into the address bar, <input type="file" /> element, or even on the desktop. To make other types of content draggable, you need to use the HTML5 DnD API.
To make an object draggable, set the elementdraggable=true。 Dragging can be supported for almost any element, including images, files, links, files, or any markup on a page.
In our example, we'll create an interface to rearrange some columns, which have been laid out via CSS Grid. The basic markup for these columns is shown below, with the draggable property set to true for each column.
Here is the CSS for my container and box elements. Note that the only CSS related to DnD functionality is the cursor: move property. The rest of the code only controls the layout and style of the container and box elements.
At this point, you will see that you can drag the item but nothing else will happen. To add DnD functionality, we need to use the JavaScript API.
Listen for drag events
Many different events can be attached to monitor the entire drag-and-drop process.
- dragstart
- drag
- dragenter
- dragleave
- dragover
- drop
- dragend
To process a DnD stream, you need some sort of source element (the starting point of the drag), the data payload (what you are trying to place), and the target (the area where the snap placement). Source elements can be images, lists, links, file objects, HTML blocks, etc. The goal is to accept the drop zone (or set of drop zones) of the data that the user is trying to place. Keep in mind that not all elements can be goals, for example, images cannot be goals.
Start and end the drag-and-drop sequence
After defining the draggable="true" property on the content, attach a dragstart event handler to start the DnD sequence for each column.
This code will set the opacity of the column to 40% when the user starts dragging, and then revert it to 100% at the end of the drag event.
The results can be seen in the Glitch demo below. Drag an item and it will become opaque. Since the dragstart event targets the source element, setting this.style.opacity to 40% gives the user visual feedback that the currently selected element is moving. After the item is placed, the source element reverts to 100% opacity, although the placement function has not yet been written.
Use dragenter, dragover, and dragleave to add additional visual cues
To help users understand how to interact with your interface, use dragenter, dragover, and dragleave event handlers. In the following example, the columns can be dragged or targeted. To help users understand this, when the user drags an item past a column, the border of that column becomes a dotted line. For example, you can create an over class in CSS to represent an element that is a placement target:
Then, set up an event handler in JavaScript to add the over class when dragging past a column and remove it when leaving. In the dragend handler, we also want to make sure that the class is removed at the end of the drag.
There are a few points to mention in this code:
When dragging an element such as a link, you need to block the browser's default behavior, which is to navigate to that link. To do this, call e.preventDefault() in the dragover event. Another good practice is to return false in the same handler.
Use the dragenter event handler to switch over classes, not dragover. If you use dragover, the CSS class is toggled multiple times because the event dragover keeps triggering when the column hovers. Eventually, this will cause the browser's renderer to do a lot of unnecessary work. It's best to always keep redrawing to a minimum. If you need to use dragover events for some reason, consider limiting or removing event listeners.
Finish the placement
To handle the actual placement, add an event listener for the drop event. In a drop handler, you need to block the browser's default placement behavior, which is usually some kind of annoying redirect. e.stopPropagation() can be called to prevent the event from triggering the DOM.
Make sure to register the new handler in the other handler:
If you run the code at this time, the project will not be placed in a new location. To achieve this, you need to use a DataTransfer object.
The dataTransfer property is where all the DnD wonders happen. It saves the data fragments sent in the drag operation. dataTransfer is set in the dragstart event and is read/processed in the drop event. Call e.dataTransfer.setData(mimeType, dataPayload) to set the MIME type and data payload of the object.
In the following example, we'll allow users to rearrange the order of the columns. To do this, first you need to store the HTML of the source element at the beginning of the drag:
Handle column placement in the drop event, set the HTML of the source column to the HTML of the target column where it is placed, first check that the target column dragged and dropped by the user is the same as the source column.
More drag properties
The dataTransfer object exposes properties that are used to provide visual feedback to the user during the dragging process. These properties can also be used to control how each placement target responds to specific data types.
- dataTransfer.effectAllowed limits the "type of drag" a user can perform on an element. It is used in the drag-and-drop handling model to initialize dropEffect during dragenter and dragover events. This property can be set to the following values: none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized.
- dataTransfer.dropEffect controls the feedback provided to the user during dragenter and dragover events. When the user hovers over the target element, the browser's cursor will indicate the type of action to be performed (e.g., copy, move, etc.). The effect can be one of the following values: none, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) indicates that the browser's default "ghost image" feedback is not used, and instead there is an option to set the drag icon.
Upload files by dragging and dropping
The following simple example uses a column as a drag source and drag target. This may be seen in the UI when the user is asked to rearrange the items. In some cases, dragging the target and dragging the source may be different, such as in an interface where the user needs to select an image as the main image of the product by dragging the selected image onto the target.
Drag and drop are often used to let users drag items from the desktop into the app. The main difference is the drop handler. Without using dataTransfer.getData() to access the file, the file's data will be included in the dataTransfer.files property:
Original link:The hyperlink login is visible.
|
Posted on 2022-4-26 10:30:50
|
|
|
|
Posted on 2022-4-26 21:27:25
|
