How to implement drag and drop function in H5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to implement drag and drop function in H5

php中世界最好的语言

Jan 10, 2018 am 09:27 AM

html5Functiondrag and drop

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped. Here is a case with drag and drop function made with H5. Let's take a look together.

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
#div1 {width:350px;height:70px;padding: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>  
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
<br>  
<img  src="/static/imghwm/default1.png"  data-src="/images/logo.png"  class="lazy"  id="drag1"  draggable="true" ondragstart="drag(event)"    style="max-width:90%"  style="max-width:90%" alt="How to implement drag and drop function in H5" >  
</body>  
</html>

2. Set the element to be draggable

First, in order to make the element draggable, set the draggable attribute to true: How to implement drag and drop function in H5

3. 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. The 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").

4. 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()

5. 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 avoid the browser's default processing of data (drop event The default behavior is to open as a link). Obtain 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"). Append the dragged element to the dropped element (target element).

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed introduction to the general interface of H5

How to use postMessage in H5 to transfer data between two web pages

The above is the detailed content of How to implement drag and drop function in H5. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AM

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

H5: Key Improvements in HTML5Apr 28, 2025 am 12:26 AM

HTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.

HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AM

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

The Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

The Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

HTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

See all articles