{"id":26116,"date":"2022-10-08T12:00:08","date_gmt":"2022-10-08T12:00:08","guid":{"rendered":"https:\/\/kb.hostatom.com\/?p=26116"},"modified":"2025-10-31T08:27:36","modified_gmt":"2025-10-31T08:27:36","slug":"html-drag-and-drop-api","status":"publish","type":"post","link":"https:\/\/kb.hostatom.com\/lesson\/26116\/","title":{"rendered":"HTML\u00a0Drag and Drop API"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"26116\" class=\"elementor elementor-26116\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7bd05cc4 e-flex e-con-boxed e-con e-parent\" data-id=\"7bd05cc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51c7fff elementor-widget elementor-widget-text-editor\" data-id=\"51c7fff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tAPI \u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07 (Drag and Drop) \u0e02\u0e2d\u0e07 HTML \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e14\u0e49\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ba3c50 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"6ba3c50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aae99b2 elementor-widget elementor-widget-heading\" data-id=\"aae99b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Drag and Drop \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a376901 elementor-widget elementor-widget-text-editor\" data-id=\"a376901\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Drag and Drop \u0e04\u0e37\u0e2d\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 <br \/>&#8220;\u0e04\u0e25\u0e34\u0e01\u0e04\u0e49\u0e32\u0e07&#8221; \u0e41\u0e25\u0e49\u0e27 &#8220;\u0e25\u0e32\u0e01&#8221; \u0e27\u0e31\u0e15\u0e16\u0e38\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2d\u0e37\u0e48\u0e19\u0e44\u0e14\u0e49<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46c110b elementor-widget elementor-widget-text-editor\" data-id=\"46c110b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e08\u0e32\u0e01\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2d\u0e35\u0e01\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-103bd40 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"103bd40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4662c40 elementor-widget elementor-widget-heading\" data-id=\"4662c40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88c0e3c elementor-widget elementor-widget-html\" data-id=\"88c0e3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"ls-tbl-wrap\">\r\n<table class=\"ls-tbl\">\r\n<tr><th>API<\/th><th>Chrome<\/th><th>Edge<\/th><th>Firefox<\/th><th>Safari<\/th><th>Opera<\/th><\/tr>\r\n<tr><td>Drag and Drop<\/td><td>4.0<\/td><td>9.0<\/td><td>3.5<\/td><td>6.0<\/td><td>12.0<\/td><\/tr>\r\n<\/table>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65f4435 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"65f4435\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-964f3ba elementor-widget elementor-widget-heading\" data-id=\"964f3ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML Drag and Drop API<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bcddf43 elementor-widget elementor-widget-text-editor\" data-id=\"bcddf43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e07\u0e48\u0e32\u0e22:\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a9ae09 elementor-widget elementor-widget-code-highlight\" data-id=\"5a9ae09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n<script>\r\nfunction dragstartHandler(ev) {\r\n  ev.dataTransfer.setData(\"text\", ev.target.id);\r\n}\r\n\r\nfunction dragoverHandler(ev) {\r\n  ev.preventDefault();\r\n}\r\n\r\nfunction dropHandler(ev) {\r\n  ev.preventDefault();\r\n  const data = ev.dataTransfer.getData(\"text\");\r\n  ev.target.appendChild(document.getElementById(data));\r\n}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"div1\" ondrop=\"dropHandler(event)\" ondragover=\"dragoverHandler(event)\"><\/div>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" id=\"img1\" src=\"img_logo.gif\" draggable=\"true\" ondragstart=\"dragstartHandler(event)\" width=\"336\" height=\"69\">\r\n\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57561c7 elementor-widget elementor-widget-button\" data-id=\"57561c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-apis?filename=draganddrop\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-048f8bc elementor-widget elementor-widget-text-editor\" data-id=\"048f8bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e2d\u0e32\u0e08\u0e14\u0e39\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19 \u0e41\u0e15\u0e48\u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e17\u0e35\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-611efb4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"611efb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9281608 elementor-widget elementor-widget-heading\" data-id=\"9281608\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d768b9f elementor-widget elementor-widget-text-editor\" data-id=\"d768b9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49 \u0e43\u0e2b\u0e49\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e41\u0e2d\u0e15\u0e17\u0e23\u0e34\u0e1a\u0e34\u0e27\u0e15\u0e4c <code>draggable<\/code> \u0e40\u0e1b\u0e47\u0e19 <code>true<\/code>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2661db4 elementor-widget elementor-widget-code-highlight\" data-id=\"2661db4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><img id=\"img1\" draggable=\"true\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4bcc12 elementor-widget elementor-widget-text-editor\" data-id=\"a4bcc12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e2b\u0e23\u0e37\u0e2d\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74dcfe3 elementor-widget elementor-widget-code-highlight\" data-id=\"74dcfe3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><p id=\"p1\" draggable=\"true\">\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49<\/p><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94d3dc5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"94d3dc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b98aba4 elementor-widget elementor-widget-heading\" data-id=\"b98aba4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e25\u0e32\u0e01 \u2013 ondragstart \u0e41\u0e25\u0e30 setData()<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17b0942 elementor-widget elementor-widget-text-editor\" data-id=\"17b0942\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19 \u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e1a\u0e2d\u0e01\u0e43\u0e2b\u0e49\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e23\u0e39\u0e49\u0e27\u0e48\u0e32\u0e40\u0e27\u0e25\u0e32\u0e25\u0e32\u0e01 \u0e08\u0e30\u0e43\u0e2b\u0e49\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e30\u0e44\u0e23\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22<br \/>\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c (event) <code>ondragstart<\/code> \u0e43\u0e19\u0e42\u0e04\u0e49\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e02\u0e49\u0e32\u0e07\u0e15\u0e49\u0e19 <code>&lt;img&gt;<\/code> \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e19\u0e35\u0e49:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2255322 elementor-widget elementor-widget-text-editor\" data-id=\"2255322\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><code>dataTransfer.setData()<\/code> \u0e08\u0e30\u0e1a\u0e2d\u0e01\u0e27\u0e48\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e25\u0e32\u0e01\u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23<br \/><code>\"text\"<\/code> \u0e04\u0e37\u0e2d\u0e0a\u0e19\u0e34\u0e14\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<br \/><code>ev.target.id<\/code> \u0e04\u0e37\u0e2d\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e08\u0e30\u0e2a\u0e48\u0e07 (\u0e43\u0e19\u0e17\u0e35\u0e48\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d <code>id=\"img1\"<\/code>)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-518b6ed elementor-widget elementor-widget-code-highlight\" data-id=\"518b6ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function dragstartHandler(ev) {\r\n  ev.dataTransfer.setData(\"text\", ev.target.id);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca6c275 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ca6c275\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c178e33 elementor-widget elementor-widget-heading\" data-id=\"c178e33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e23\u0e30\u0e1a\u0e38\u0e27\u0e48\u0e32\u0e08\u0e30 \u201c\u0e27\u0e32\u0e07\u201d \u0e17\u0e35\u0e48\u0e44\u0e2b\u0e19<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c71a04 elementor-widget elementor-widget-text-editor\" data-id=\"1c71a04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e42\u0e14\u0e22\u0e1b\u0e01\u0e15\u0e34 \u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e08\u0e30\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e40\u0e2d\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e21\u0e32\u0e27\u0e32\u0e07\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<br \/>\u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e02\u0e35\u0e22\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 <code>preventDefault()<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d \u201c\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e43\u0e2b\u0e49\u0e27\u0e32\u0e07\u0e44\u0e14\u0e49\u201d<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af31594 elementor-widget elementor-widget-code-highlight\" data-id=\"af31594\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function dragoverHandler(ev) {\r\n  ev.preventDefault();\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b97696c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"b97696c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-963d092 elementor-widget elementor-widget-heading\" data-id=\"963d092\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e17\u0e33\u0e01\u0e32\u0e23 \u201c\u0e27\u0e32\u0e07\u201d<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c68bcca elementor-widget elementor-widget-text-editor\" data-id=\"c68bcca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e21\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e27\u0e31\u0e15\u0e16\u0e38 \u0e08\u0e30\u0e40\u0e01\u0e34\u0e14\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c drop\n\u0e40\u0e23\u0e32\u0e08\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e21\u0e31\u0e19\u0e14\u0e49\u0e27\u0e22\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 <code>dropHandler()<\/code>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d48550f elementor-widget elementor-widget-code-highlight\" data-id=\"d48550f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-typescript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-typescript\">\n\t\t\t\t\t<xmp>function dropHandler(ev) {\r\n  ev.preventDefault();\r\n  const data = ev.dataTransfer.getData(\"text\");\r\n  ev.target.appendChild(document.getElementById(data));\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca8d55d elementor-widget elementor-widget-text-editor\" data-id=\"ca8d55d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e17\u0e35\u0e25\u0e30\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14:<\/p>\n<ul>\n<li><code>preventDefault()<\/code> \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e40\u0e1b\u0e34\u0e14\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/li>\n<li><code>getData(\"text\")<\/code> \u0e14\u0e36\u0e07\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07\u0e44\u0e27\u0e49\u0e15\u0e2d\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e25\u0e32\u0e01<\/li>\n<li>\u00a0<code>appendChild()<\/code> \u0e40\u0e2d\u0e32\u0e27\u0e31\u0e15\u0e16\u0e38\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e25\u0e32\u0e01\u0e21\u0e32\u0e27\u0e32\u0e07\u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d971fd6 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d971fd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b86b52 elementor-widget elementor-widget-heading\" data-id=\"9b86b52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e1b\u0e21\u0e32\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2a\u0e2d\u0e07<code>&lt;div&gt;<\/code><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c57667 elementor-widget elementor-widget-text-editor\" data-id=\"3c57667\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e27\u0e34\u0e18\u0e35\u0e25\u0e32\u0e01 (\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07) \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e1b\u0e21\u0e32\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2a\u0e2d\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a <code>&lt;div&gt;<\/code>:\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e9335d elementor-widget elementor-widget-code-highlight\" data-id=\"6e9335d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script>\r\nfunction allowDrop(e){e.preventDefault();}\r\nfunction drag(e){e.dataTransfer.setData(\"text\",e.target.id);}\r\nfunction drop(e){e.preventDefault();e.target.appendChild(document.getElementById(e.dataTransfer.getData(\"text\"))); }\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"div1\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\">\r\n  <img id=\"drag1\" src=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2023\/05\/img_logo.jpg\" draggable=\"true\" ondragstart=\"drag(event)\" width=\"88\" height=\"31\">\r\n<\/div>\r\n\r\n<div id=\"div2\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"><\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2670b6 elementor-widget elementor-widget-button\" data-id=\"d2670b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml-apis?filename=draganddrop2\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>API \u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07 (Drag and Drop) \u0e02\u0e2d\u0e07 HTML \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e14\u0e49 Drag and Drop \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23? Drag and Drop \u0e04\u0e37\u0e2d\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 &#8220;\u0e04\u0e25\u0e34\u0e01\u0e04\u0e49\u0e32\u0e07&#8221; \u0e41\u0e25\u0e49\u0e27 &#8220;\u0e25\u0e32\u0e01&#8221; \u0e27\u0e31\u0e15\u0e16\u0e38\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2d\u0e37\u0e48\u0e19\u0e44\u0e14\u0e49 \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e08\u0e32\u0e01\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2d\u0e35\u0e01\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19 API Chrome Edge Firefox Safari Opera Drag and Drop 4.0 9.0 3.5 6.0 12.0 HTML Drag and Drop API \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e07\u0e48\u0e32\u0e22: \u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c \u0e2d\u0e32\u0e08\u0e14\u0e39\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19 \u0e41\u0e15\u0e48\u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e17\u0e35\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e2b\u0e15\u0e38\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e25\u0e32\u0e01\u0e41\u0e25\u0e30\u0e27\u0e32\u0e07 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49 \u0e43\u0e2b\u0e49\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e41\u0e2d\u0e15\u0e17\u0e23\u0e34\u0e1a\u0e34\u0e27\u0e15\u0e4c draggable \u0e40\u0e1b\u0e47\u0e19 true \u0e2b\u0e23\u0e37\u0e2d \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e25\u0e32\u0e01\u0e44\u0e14\u0e49 \u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e25\u0e32\u0e01 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-26116","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/26116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/comments?post=26116"}],"version-history":[{"count":0,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/26116\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/media?parent=26116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/categories?post=26116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/tags?post=26116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}