<\/span><\/h2>\n\n\n\nS\u1ee5 ki\u1ec7n ondragover ch\u1ec9 \u0111\u1ecbnh n\u01a1i n\u00e0o d\u1eef li\u1ec7u k\u00e9o c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c th\u1ea3.<\/p>\n\n\n\n
Theo m\u1eb7c \u0111\u1ecbnh, d\u1eef li\u1ec7u\/c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c th\u1ea3 (drop) v\u00e0o b\u00ean trong ph\u1ea7n t\u1eed kh\u00e1c. \u0110\u1ec3 kh\u1ea3 n\u0103ng th\u1ea3 (drop) \u0111\u01b0\u1ee3c cho ph\u00e9p, ch\u00fang ta ph\u1ea3i lo\u1ea1i b\u1ecf t\u00ednh n\u0103ng m\u1eb7c \u0111\u1ecbnh n\u00e0y c\u1ee7a th\u1ebb\/ph\u1ea7n t\u1eed.<\/p>\n\n\n\n
\u0110i\u1ec1u \u0111\u00f3 \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch g\u1ecdi ph\u01b0\u01a1ng th\u1ee9c\u00a0event.preventDefault() cho s\u1ef1 ki\u1ec7n:<\/p>\n\n\n\n
event.preventDefault()<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>Th\u1ef1c hi\u1ec7n th\u1ea3 \u2013 ondrop<\/span><\/h2>\n\n\n\nSau khi k\u00e9o v\u00e0 th\u1ea3 d\u1eef li\u1ec7u, m\u1ed9t s\u1ef1 ki\u1ec7n th\u1ea3 x\u1ea3y ra.<\/p>\n\n\n\n
Trong v\u00ed d\u1ee5 tr\u00ean, thu\u1ed9c t\u00ednh ondrop g\u1ecdi m\u1ed9t h\u00e0m, drop(event):<\/p>\n\n\n\n
function drop(ev) {\nev.preventDefault();\nvar data = ev.dataTransfer.getData(\u201ctext\u201d);\nev.target.appendChild(document.getElementById(data));\n}<\/code><\/pre>\n\n\n\nGi\u1ea3i th\u00edch code:<\/p>\n\n\n\n
- G\u1ecdi
preventDefault()<\/code> \u0111\u1ec3 ch\u1eb7n c\u00e1c t\u00ednh n\u0103ng x\u1eed l\u00fd m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t v\u1edbi d\u1eef li\u1ec7u;<\/li>- L\u1ea5y d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c k\u00e9o v\u1edbi ph\u01b0\u01a1ng th\u1ee9c
dataTransfer.getData()<\/code>, ph\u01b0\u01a1ng th\u1ee9c n\u00e0y s\u1ebd tr\u1ea3 v\u1ec1 b\u1ea5t k\u1ef3 d\u1eef li\u1ec7u n\u00e0o \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u1ec3 c\u00f9ng lo\u1ea1i trong ph\u01b0\u01a1ng th\u1ee9c SetData()<\/code>;<\/li>- D\u1eef li\u1ec7u k\u00e9o l\u00e0 id c\u1ee7a ph\u1ea7n t\u1eed k\u00e9o(\u201cdrag1\u201d);<\/li>
- N\u1ed1i ph\u1ea7n t\u1eed k\u00e9o v\u00e0o ph\u1ea7n t\u1eed th\u1ea3;<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
T\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n ti\u00eau chu\u1ea9n trong HTML5. K\u00e9o th\u1ea3 l\u00e0 t\u00ednh n\u0103ng r\u1ea5t ph\u1ed5 bi\u1ebfn. B\u1ea1n \u201ct\u00f3m\u201d m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng v\u00e0 th\u1ea3 n\u00f3 v\u00e0o v\u1ecb tr\u00ed kh\u00e1c. Trong HTML5, t\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a ti\u00eau chu\u1ea9n ph\u1ea3i c\u00f3, v\u00e0 b\u1ea5t k\u1ef3 \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0o c\u0169ng c\u00f3 th\u1ec3 k\u00e9o …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[235],"tags":[],"yoast_head":"\n
T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5 • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5 • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n ti\u00eau chu\u1ea9n trong HTML5. K\u00e9o th\u1ea3 l\u00e0 t\u00ednh n\u0103ng r\u1ea5t ph\u1ed5 bi\u1ebfn. B\u1ea1n \u201ct\u00f3m\u201d m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng v\u00e0 th\u1ea3 n\u00f3 v\u00e0o v\u1ecb tr\u00ed kh\u00e1c. Trong HTML5, t\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a ti\u00eau chu\u1ea9n ph\u1ea3i c\u00f3, v\u00e0 b\u1ea5t k\u1ef3 \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0o c\u0169ng c\u00f3 th\u1ec3 k\u00e9o …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-18T08:04:05+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5 • Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5 • Ki\u1ebfn c\u00e0ng","og_description":"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n ti\u00eau chu\u1ea9n trong HTML5. K\u00e9o th\u1ea3 l\u00e0 t\u00ednh n\u0103ng r\u1ea5t ph\u1ed5 bi\u1ebfn. B\u1ea1n \u201ct\u00f3m\u201d m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng v\u00e0 th\u1ea3 n\u00f3 v\u00e0o v\u1ecb tr\u00ed kh\u00e1c. Trong HTML5, t\u00ednh n\u0103ng k\u00e9o th\u1ea3 l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a ti\u00eau chu\u1ea9n ph\u1ea3i c\u00f3, v\u00e0 b\u1ea5t k\u1ef3 \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0o c\u0169ng c\u00f3 th\u1ec3 k\u00e9o …","og_url":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2016-06-18T08:04:05+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/","url":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/","name":"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5 • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2016-06-18T08:04:05+00:00","dateModified":"2016-06-18T08:04:05+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tinh-nang-keo-tha-trong-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u00ednh n\u0103ng k\u00e9o th\u1ea3 (Drag and Drop) trong HTML5"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/2464"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=2464"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/2464\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=2464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=2464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=2464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}