How to use HTML5 to realize the drag and drop operation of web page elements

This article will explain in detail how to use HTML5 to achieve drag-and-drop operation of web page elements. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Scene:

As shown in the following figure, we want to implement:

Drag and drop photos from the "album" area on the left to the "dustbin" area on the right; during the drag-and-drop process, the "warm Tips" section should be reminded in time, and the drag-and-drop operation is currently under way.

Implementation method:

For example, the HTML code in the above interface is relatively simple, as follows:

The code is as follows:

HTML5 implements drag and drop operation

.album

{

Border: 3px dashed # ccc

Float: left

Margin: 10px

Min-height: 100px

Padding: 10px

Width: 220px

}