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

Home

Web Front-end

HTML Tutorial

How to implement drag and drop in H5

php中世界最好的语言

Jan 19, 2018 am 09:28 AM

html5 how accomplish

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 !