The HTML5 Drag and Drop (DnD) API means that almost any element on the page can be made draggable. In this article, we’ll cover the basics of drag and drop.
Create draggable content #
It’s worth noting that text selections, images, and links are draggable by default in most browsers. For example, if you drag the Google logo on Google Search , you will see ghost images. The image can then be dragged and dropped onto the address bar, <input type="file" /> element, or even on the desktop. To make other types of content draggable, you need to use the HTML5 DnD API.
To make the object draggable, set draggable=true on the element. Almost any element can support dragging, including images, files, links, files, or any markup on the page.
In our example, we will create an interface to rearrange some columns, which have been laid out with CSS Grid. The basic markup for these columns is shown below, each with the draggable property set to true .
< div class = " container " > < div draggable =
…
The post Drag drop API using HTML5 drag and drop first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9699
This site is for inclusion only, and the copyright belongs to the original author.