“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”
New feature of HTML5 — drag and drop
The content of express delivery
The introduction
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.
Drag and drop operation, multi-purpose in drag sorting list, game puzzles, etc.
Drag and drop is the same as drag and drop.
The official introduction
The HTML Drag and Drop interface enables applications to use Drag and Drop functionality in the browser. For example, the user can use the mouse to select draggable elements, drag elements to droppable elements, and release mouse buttons to place those elements.
During a drag operation, a translucent snapshot of the dragable element follows the mouse pointer.
The document
You can look at some of the drag-and-drop apis, including descriptions of the interfaces, basic steps for adding drag-and-drop support to your application, and a brief introduction to the use of the interfaces.
Document address: Official document
Drag and drop event
There are eight main events, a series of event responses that complete the drag and drop process.
The event | Event functions | Trigger point |
---|---|---|
drag |
ondrag |
Triggered when an element or selected text is dragged. |
dragend |
ondragend |
Triggered when a drag action is completed (such as releasing the mouse button or pressing the Esc key). |
dragenter |
ondragenter |
Triggered when an element or selected text is dragged to a releasable target. |
dragexit |
ondragexit |
Triggered when an element becomes no longer the selected target of a drag operation. |
dragleave |
ondragleave |
Triggered when a drag element or selected text leaves a releasable target. |
dragover |
ondragover |
Triggered when an element or selected text is dragged onto a releasable target (every 100 milliseconds). |
dragstart |
ondragstart |
Triggered when the user starts dragging an element or selected text. |
drop |
ondrop |
Emitted when an element or selected text is released on a releaseable target. |
Drag and drop the core
What is draggable?
Student: Doesn’t it say you can drag and drop any element? Why can’t I usually drag it?
That usually drag, not called function, called BUG!
To make the element dragable, the draggable property needs to be set to true
<div draggable="true"></div>
Copy the code
Drag up
With the onDragstart event, the datatransfer.setData () method is called to set the data type and value of the dragged data.
<script>
window.addEventListener('DOMContentLoaded'.() = > {
const element = document.getElementById("p1");
element.addEventListener("dragstart".(ev) = > {
ev.dataTransfer.setData("text/plain", ev.target.id);
});
});
</script>
<p id="p1" draggable="true">This element is draggable.</p>
Copy the code
Drag and drop data
An application can include any number of data items in a drag and drop operation. Each data item is a string, a typical MIME type, such as text/ HTML.
function dragstart_handler(ev) {
// Add drag data
ev.dataTransfer.setData("text/plain", ev.target.innerText);
ev.dataTransfer.setData("text/html", ev.target.outerHTML);
ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
}
Copy the code
To learn more about XDM, see Recommended Drag types (EN-US) for common data types (such as text, HTML, links, and files) that can be dragged.
Drag the image
During drag and drop, the browser displays a default image next to the mouse.
Customize an image with the setDragImage() method.
function dragstart_handler(ev) {
var img = new Image();
img.src = 'example.gif';
ev.dataTransfer.setDragImage(img, 10.10);
}
Copy the code
Of course, if you need the image style, you can use the basic drag and drop data type.
Drag the effect
Feedback during drag and drop, or when the mouse hovers over an element, has three effects that can be defined:
- Copy indicates that the data being dragged will be copied from its original location to the destination location.
- Move indicates that the dragged data will be moved.
- Link indicates that some relational tables or links will be created between the source and target locations when you drag them.
Set it up with dropEffect
function dragstart_handler(ev) {
ev.dataTransfer.dropEffect = "copy";
}
Copy the code
Place the
When you drag an item into an HTML element, the browser does not respond by default.
There is a drag up so there must be placed, unless you stubborn! Not panasonic mouse!
This is done by ondrop and onDragover! Datatransfer.getdata () to set the new data.
<script>
function dragover_handler(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/plain");
ev.target.appendChild(document.getElementById(data));
}
</script>
<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
Copy the code
A drag case
A drag and drop case can go from A->B, B->A.
The previous implementation of unilateral drag, is a drag, a drop. So these two are set up like this, isn’t it possible to achieve drag and drop each other?
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>drag</title>
<style type="text/css">
#div1.#div2 {
float:left;
width:200px;
height:80px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="FM = https://img0.baidu.com/it/u=1047123058, 3465364298 & 253 & FMT = auto&app = 138 & f = JPEG? W = 720 & h = 405" draggable="true" ondragstart="drag(event)" id="drag1" width="200" height="80">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Copy the code
The effect
A handy drag and drop plugin
Vue draggable: draggable: Vue draggable: Vue draggable: Vue draggable: Vue draggable: Vue draggable:
There is also a js public version written by its author.
Also put the Chinese document address posted, I hope to help you learn drag. Chinese document address.
conclusion
Write so much, always feel like more!
Need a drag and drop small game case? (Waiting for arrangement, time is urgent, need to schedule!!)
Refactoring the front-end knowledge body, you want to join us?
Blog notes and acknowledgments
Part of the information involved in this article comes from the Internet, which contains my own summary and views. The purpose of sharing is to build the community and consolidate myself.
If the information cited infringement, please contact me to delete!
Thanks to the almighty network, W3C, rookie tutorials, etc!
If you feel helpful to you, might as well give me a thumbs-up to encourage, good article remember to collect yo!
Pay attention to me grow together!
Thank god I was here. Thank you for coming!