{"id":6241,"date":"2022-12-02T04:30:13","date_gmt":"2022-12-02T04:30:13","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6241"},"modified":"2022-12-02T05:29:05","modified_gmt":"2022-12-02T05:29:05","slug":"html5-drag-and-drop-api","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/","title":{"rendered":"Html5 Drag and Drop API"},"content":{"rendered":"

Introduction:<\/h2>\n

The document object model is a key source of data for the HTML5 drag and drop<\/a> API in order to determine what is being moved or dropped. The outcome is that it enables us to drag and drop any element on the website. The user can click and drag elements with a mouse to drop them by letting go of the mouse button.<\/p>\n

Events on draggable elements:<\/h3>\n

Dragstart:<\/strong> When we begin to drag, it is triggered. We must inform the API of our intended drag targets and define additional parameters at this point.
\nDrag:<\/strong> While dragging, this event is constantly triggered. It depends on the browser and how frequently it happens. This is helpful for locating the draggable object precisely.
\nDragend<\/strong> occurs when a user stops dragging an object with the mouse button pressed.<\/p>\n

Events on drop targets:<\/h3>\n

Dragenter:<\/strong> triggered while a drag is in progress when the mouse is first moved over the target element.
\nDragover:<\/strong> This event is triggered whenever a drag is taking place while the mouse is over an element.
\nDrop:<\/strong> The drop event is fired on the element where the drop took place.<\/p>\n

Drag and drop example: In this example, we will create a draggable list in HTML5<\/h3>\n

<div>
\n<ul class=\"list-group\" id=\"dynamic-list\">
\n<li id=1 class=\u201dlist\u201d draggable=\"true\">item 1<\/li>
\n<li id=2 class=\u201dlist\u201d draggable=\"true\">item 2<\/li>
\n<li id=3 class=\u201dlist\u201d draggable=\"true\">item 3<\/li>
\n<li id=4 class=\u201dlist\u201d draggable=\"true\">item 4<\/li>
\n<\/ul>
\n<\/div>
\n<script>
\n\/\/add an event to each li
\nconst AllList= document.querySelectorAll('.list);
\nAllList.forEach(list => {
\nlist.addEventListener(ondragstart, drag)
\nlist.addEventListener(ondrop, drop);
\nlist.addEventListener(ondragover, dragover);
\n});
\nlet dragindex = 0;
\nlet dropindex = 0;
\nlet clone = \"\";
\n\/\/Drag Event
\nfunction drag(ev) {
\nev.dataTransfer.setData(\"text\", ev.target.id); \/\/Set id of drag element
\n}
\n\/\/Drop Event
\nfunction drop(ev) {
\nev.preventDefault();
\nclone = ev.target.cloneNode(true);
\nlet data = ev.dataTransfer.getData(\"text\"); \/\/get id of dragged element
\nif (clone.id !== data) {
\nlet nodelist = document.getElementById(\"dynamic-list\").childNodes;
\nfor (let i = 0; i < nodelist.length; i++) {
\nif (nodelist[i].id == data) {
\ndragindex = i;
\n}
\n}
\ndocument.getElementById(\"dynamic-list\").replaceChild(document.getElementById(data), ev.target);
\ndocument.getElementById(\"dynamic-list\").insertBefore(clone,
\ndocument.getElementById(\"dynamic-list\").childNodes[dragindex]);
\n}
\n}
\nfunction dragover(ev) {
\nev.preventDefault();
\n}<\/code><\/p>\n

If you need to prove your skills in the .NET framework, get .NET certified on StudySection. StudySection provides .NET certification exam<\/a> for beginners as well as experts in the .NET framework. This .NET certification can improve your resume\u2019s success rate.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction: The document object model is a key source of data for the HTML5 drag and drop API in order<\/p>\n","protected":false},"author":1,"featured_media":6242,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[340,654],"acf":[],"yoast_head":"\nHtml5 Drag and Drop API - StudySection Bloig<\/title>\n<meta name=\"description\" content=\"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Html5 Drag and Drop API - StudySection Bloig\" \/>\n<meta property=\"og:description\" content=\"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-02T04:30:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-02T05:29:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/12\/Html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Html5 Drag and Drop API\",\"datePublished\":\"2022-12-02T04:30:13+00:00\",\"dateModified\":\"2022-12-02T05:29:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\"},\"wordCount\":250,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"API\",\"Html5\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\",\"url\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\",\"name\":\"Html5 Drag and Drop API - StudySection Bloig\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-12-02T04:30:13+00:00\",\"dateModified\":\"2022-12-02T05:29:05+00:00\",\"description\":\"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Html5 Drag and Drop API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Html5 Drag and Drop API - StudySection Bloig","description":"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.","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:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/","og_locale":"en_US","og_type":"article","og_title":"Html5 Drag and Drop API - StudySection Bloig","og_description":"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.","og_url":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-12-02T04:30:13+00:00","article_modified_time":"2022-12-02T05:29:05+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/12\/Html5.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Html5 Drag and Drop API","datePublished":"2022-12-02T04:30:13+00:00","dateModified":"2022-12-02T05:29:05+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/"},"wordCount":250,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["API","Html5"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/","url":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/","name":"Html5 Drag and Drop API - StudySection Bloig","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-12-02T04:30:13+00:00","dateModified":"2022-12-02T05:29:05+00:00","description":"The document object model is a key source of data for the HTML5 drag and drop API in order to determine what is being moved or dropped.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/html5-drag-and-drop-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Html5 Drag and Drop API"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":374,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6241"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6241"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6241\/revisions"}],"predecessor-version":[{"id":6244,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6241\/revisions\/6244"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6242"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}