{"id":342,"date":"2016-07-04T22:59:32","date_gmt":"2016-07-04T21:59:32","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=342"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"javascript-simple-drag-drop-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-simple-drag-drop-example\/","title":{"rendered":"Javascript &#8211; Simple Drag &#038; Drop Example"},"content":{"rendered":"<pre lang=\"html\">\r\n<!DOCTYPE HTML>\r\n<html>\r\n\r\n<head>\r\n\t<style>\r\n\t\t#div1,\r\n\t\t#div2 {\r\n\t\t\twidth: 350px;\r\n\t\t\theight: 70px;\r\n\t\t\tpadding: 10px;\r\n\t\t\tborder: 1px solid #aaaaaa;\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\t<p>Drag the image into the rectangle:<\/p>\r\n\t<div id=\"div1\"><\/div>\r\n\t<br>\r\n\t<div id=\"div2\"><\/div>\r\n\t<br>\r\n\t<img loading=\"lazy\" decoding=\"async\" id=\"drag1\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/ef\/Station_Clock.svg\" draggable=\"true\" width=\"336\" height=\"69\" \/>\r\n\t<script>\r\n\t\t(function() {\r\n\t\t\tvar ready = function(fn) {\r\n\t\t\t\tif (document.readyState == \"complete\" || document.readyState == \"loaded\") {\r\n\t\t\t\t\tfn();\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdocument.addEventListener(\"DOMContentLoaded\", fn, false);\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t\tvar $ = document.querySelectorAll.bind(document);\r\n\r\n\t\t\tfunction allowDrop(ev) {\r\n\t\t\t\tev.preventDefault();\r\n\t\t\t}\r\n\r\n\t\t\tvar targetId = null;\r\n\r\n\t\t\tfunction onDrag(ev) {\r\n\t\t\t\ttargetId = ev.target.id;\r\n\t\t\t\tconsole.log('dragging', targetId);\r\n\t\t\t}\r\n\r\n\t\t\tfunction onDrop(ev) {\r\n\t\t\t\tconsole.log('dropping', targetId);\r\n\t\t\t\tev.preventDefault();\r\n\t\t\t\tvar data = ev.dataTransfer.getData(\"text\");\r\n\t\t\t\tev.target.appendChild(document.getElementById(targetId));\r\n\t\t\t}\r\n\r\n\t\t\tready(function() {\r\n\t\t\t\tconsole.log('registering');\r\n\t\t\t\tvar drop = $('#div1')[0];\r\n\t\t\t\tdrop.addEventListener(\"drop\", onDrop);\r\n\t\t\t\tdrop.addEventListener(\"dragover\", allowDrop);\r\n\r\n\t\t\t\tvar drop = $('#div2')[0];\r\n\t\t\t\tdrop.addEventListener(\"drop\", onDrop);\r\n\t\t\t\tdrop.addEventListener(\"dragover\", allowDrop);\r\n\r\n\t\t\t\tvar drag = $('#drag1')[0];\r\n\t\t\t\tdrag.addEventListener(\"dragstart\", onDrag);\r\n\t\t\t});\r\n\t\t}());\r\n\t<\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Drag the image into the rectangle:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-342","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/342\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}