How to implement drag and drop in H5

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

拖动我!

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:

拖动img_w3slogo.gif图片到矩形框中:




 

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!