HTML5 is so popular now, let’s get to know these new elements. This article mainly teaches you what HTML5 drag-and-drop elements are and how to use them.
What does drag and drop mean in HTML5?
Drag-and-drop is a common feature where you grab an object and then drag it to another location. , the purpose of drag and drop is to allow you to place an object where you want to place it. In HTML5, drag and drop is part of the standard and any element can be dragged and dropped.
What do Drag and Drop mean?
#darg: The event body is the dragged element and is triggered when the dragged element is being dragged and dropped.
drop: The event body is the target element, which is triggered when the target element completely accepts the dragged and dropped element.
Browser support
Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support dragging.
HTML5 drag and drop usage example
The following example is a simple drag and drop example ：
Here are examples:
<!DOCTYPE HTML>
<html>
<head>
<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)"></div>
<img src="/static/imghwm/default1.png" data-src="img_logo.gif" class="lazy" id="drag1" draggable="true"
ondragstart="drag(event)" style="max-width:90%" height="69">
</body>
</html>It may look a bit complicated, but we can study different parts of the drag and drop event separately.
Detailed steps for drag and drop event execution:
1. Set the element to be draggable
First, in order to make the element Draggable, set the draggable attribute to true:
<img draggable="true" alt="HTML5 Drag and Drop: What do Drag and Drop mean? How to use it?" >
What to drag - ondragstart and setData()
Then, specify what will happen when the element is dragged.
In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged.
dataTransfer.setData() method sets the data type and value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}In this example, the data type is "Text" and the value is the id of the draggable element ( "drag1").
Tip: You can learn more useful information in the "ondragstart event" section of this site!
2. Where to place - ondragover
ondragover event specifies where to place the dragged data.
By default, data/elements cannot be placed into other elements. If we need to allow placement, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method of the ondragover event:
event.preventDefault()
3. Place - ondrop
When the dragged data is placed, the drop event will occur.
In the above example, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}Code explanation:
Call preventDefault() to prevent the browser from modifying the data The default processing (the default behavior of the drop event is to open as a link)
Get the dragged data through the dataTransfer.getData("Text") method. This method will return any data set to the same type in the setData() method.
The dragged data is the id of the dragged element ("drag1"), and the dragged element is appended to the placed element (target element).
[Related recommendations]
The basic elements of html, allowing you to learn HTML from scratch
The development of HTML and HTML5 history
The above is the detailed content of HTML5 Drag and Drop: What do Drag and Drop mean? How to use it?. For more information, please follow other related articles on the PHP Chinese website!
What Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AMH5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5: Tools, Frameworks, and Best PracticesApr 11, 2025 am 12:11 AMThe tools and frameworks that need to be mastered in H5 development include Vue.js, React and Webpack. 1.Vue.js is suitable for building user interfaces and supports component development. 2.React optimizes page rendering through virtual DOM, suitable for complex applications. 3.Webpack is used for module packaging and optimize resource loading.
The Legacy of HTML5: Understanding H5 in the PresentApr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5 Code: Accessibility and Semantic HTMLApr 09, 2025 am 12:05 AMH5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.
Is h5 same as HTML5?Apr 08, 2025 am 12:16 AM"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.
What is the function of H5?Apr 07, 2025 am 12:10 AMH5, or HTML5, is the fifth version of HTML. It provides developers with a stronger tool set, making it easier to create complex web applications. The core functions of H5 include: 1) elements that allow drawing graphics and animations on web pages; 2) semantic tags such as, etc. to make the web page structure clear and conducive to SEO optimization; 3) new APIs such as GeolocationAPI support location-based services; 4) Cross-browser compatibility needs to be ensured through compatibility testing and Polyfill library.
How to do h5 linkApr 06, 2025 pm 12:39 PMHow to create an H5 link? Determine the link target: Get the URL of the H5 page or application. Create HTML anchors: Use the <a> tag to create an anchor and specify the link target URL. Set link properties (optional): Set target, title, and onclick properties as needed. Add to webpage: Add HTML anchor code to the webpage where you want the link to appear.
How to solve the h5 compatibility problemApr 06, 2025 pm 12:36 PMSolutions to H5 compatibility issues include: using responsive design that allows web pages to adjust layouts according to screen size. Use cross-browser testing tools to test compatibility before release. Use Polyfill to provide support for new APIs for older browsers. Follow web standards and use effective code and best practices. Use CSS preprocessors to simplify CSS code and improve readability. Optimize images, reduce web page size and speed up loading. Enable HTTPS to ensure the security of the website.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 Chinese version
Chinese version, very easy to use
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
