How to create drag effect in H5

This time I will show you how to create a drag-and-drop effect in H5. What are theprecautions for H5 to create a drag-and-drop effect? The following is a practical case, let’s take a look.

Drag related attributes

The draggable attribute is the

global attributeof html5. It is one of the ways that html5 supports drag and drop operations. It is used to indicate whether an element can be dragged and dropped. , draggable has three values, true means it can be dragged and dropped, false means it cannot be dragged and dropped, auto means the browser's default value is used

Drag-related events

ondragstart: This event Triggered when the user starts dragging an element or selecting text ondrag: Triggered when the element is being dragged ondragend: Triggered when the user completes dragging and dropping an element ondragleave: Triggered when the object being dragged by the mouse leaves the scope of its container ondragover: Triggered when an object is dragged This event is triggered when the moving object is dragged within the scope of another object container. This event occurs on the target element. ondrop: During a drag process, this event is triggered when the mouse is released. This event acts on the target element.

dataTransfer object related methods

setData(format,data): Add a custom data format getData(format): Get a custom data format clearData([format]): Clear the custom data format and data

Event.preventDefault()

This method is the default behavior to prevent events. PreventDefault() must be executed in ondragover, otherwise the ondrop event will not be triggered

Believe it After reading these cases, you have mastered the methods. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to count the number of table sums in bootstrap

How to use JS to switch between hiding and showing icons at the same time

How to implement vue.js todolist

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