How to implement drag and drop in H5

php中世界最好的语言
Release: 2018-01-19 09:28:57
Original
2004 people have browsed it

This time I will show you how to implement H5 drag and drop, and what precautions should be taken to achieve the H5 drag and drop effect. The following is a practical case, let’s take a look.

Introduction

Drag-and-drop is a common feature where you grab an object and then drag it to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

First click on a small example: execute when the user starts dragging the

elementJavaScript

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
Copy after login


Tips: Link and Pictures are draggable by default and do not require the draggable attribute.

Definition and usage

The following events will be triggered during the drag and drop process:

Trigger events on the drag target (source element): ondragstart - triggered when the user starts dragging the element

ondrag - triggered when the element is being dragged

ondragend - triggered when the user finishes dragging the element

Event triggered when the target is released : ondragenter - This event is triggered when the object being dragged by the mouse enters the scope of its container

ondragover - This event is triggered when a dragged object is dragged within the scope of another object's container

ondragleave - This event is triggered when the object being dragged by the mouse leaves the scope of its container

ondrop - This event is triggered when the mouse button is released during a drag process

Browse The browser supports

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.

Note: Safari 5.1.2 does not support dragging; when dragging an element, the ondragover event will be triggered every 350 milliseconds.

Example

Post the code first, and then explain one by one:

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
 
<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>
</body>
</html>
Copy after login

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

Related reading:

How to implement HTML table mouse drag sorting

What files does html belong to? How to open

What are the standard usage of comments in html, css and js

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!