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

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:

1. Copy indicates that the data being dragged will be copied from its original location to the destination location.
2. Move indicates that the dragged data will be moved.
3. 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!