How to Implement Drag and Drop in HTML5? (Code Snippet)

HTML5原生支持拖放，需设置draggable="true"启用元素拖拽，通过dragstart存数据、dragover调用preventDefault允许投放、drop读取数据实现完整流程。

Drag and drop in HTML5 is built into the browser — no libraries needed. It relies on a set of events and proper attribute setup to work reliably.

Enable Draggable Elements

Add the draggable="true" attribute to any element you want users to be able to drag. By default, only images and links are draggable.

• Text elements, divs, buttons — all need draggable="true"
• Set draggable="false" to disable dragging on otherwise draggable elements (e.g., an image)
• Styling feedback helps: use CSS like [draggable="true"] { cursor: move; }

Handle Drag Events on the Source

When dragging starts, the browser fires dragstart. Use it to store data with dataTransfer.setData().

• Only text/plain, text/html, and text/uri-list are universally supported MIME types
• Example: event.dataTransfer.setData("text/plain", "item-42");
• You can also set a custom drag image using setDragImage() for better UX

Make Drop Targets Accept Drops

By default, most elements reject drops. Prevent the default behavior on dragover and drop to allow dropping.

• Add event.preventDefault() inside dragover — this is required
• In drop, read the data with dataTransfer.getData("text/plain")
• Use dragenter or dragleave to highlight targets visually

Complete Working Snippet

Here’s a minimal but functional example:

The above is the detailed content of How to Implement Drag and Drop in HTML5? (Code Snippet). For more information, please follow other related articles on the PHP Chinese website!