\u4eca\u56de\u306f\u3001A\uff5eD\u307e\u3067\u306e\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8\u753b\u50cf\u3092\u30b7\u30a2\u30f3\u304b\u3089\u30a4\u30a8\u30ed\u30fc\u3078\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3067\u79fb\u52d5\u3067\u304d\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u3064\u304f\u308a\u307e\u3059\u3002<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n \u2193\u30c7\u30e2\u30da\u30fc\u30b8\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u25bcHTML<\/p>\n \u25bcCSS<\/p>\n DataTransfer.getData()\u306e\u30e1\u30bd\u30c3\u30c8\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u77e5\u308a\u305f\u3044\u3068\u3044\u3046\u65b9\u306f\u4e0b\u8a18\u30da\u30fc\u30b8\u3082\u3054\u89a7\u304f\u3060\u3055\u3044\u3002\u8272\u5206\u3051\u3055\u308c\u3066\u3044\u3066\u3069\u3053\u304c\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b\u306e\u304b\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002DataTransfer.getData()<\/a>\n<\/p>\n \u25bcJavascript<\/p>\n\r\n <div class="boxdrag" id="dropbox">\r\n <img src="img\/a.png" id="a" alt="a" \/>\r\n <img src="img\/b.png" id="b" alt="b" \/>\r\n <img src="img\/c.png" id="c" alt="c" \/>\r\n <img src="img\/d.png" id="d" alt="d" \/>\r\n <\/div>\r\n <div class="boxdrag" id="drop"><\/div>\r\n<\/pre>\n
\r\n<style>\r\ndiv.boxdrag {\r\n width: 100%;\r\n height: 100px;\r\n}\r\ndiv#dropbox {\r\n background-color: #80ffff;\r\n}\r\ndiv#drop {\r\n background-color: #ffff80;\r\n}\r\ndiv.boxdrag img {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n<\/style>\r\n<\/pre>\n\r\n<script>\r\nlet getElem = document.getElementsByTagName(\"img\");\r\nfor (let i = 0; i < getElem.length; i++) {\r\n getElem[i].addEventListener(\r\n \"dragstart\",\r\n function (evt) {\r\n evt.dataTransfer.setData(\"text\/plain\", evt.target.id);\r\n evt.stopPropagation();\r\n },\r\n false\r\n );\r\n}\r\n\r\nlet item1 = document.getElementById(\"drop\");\r\n\r\nitem1.addEventListener(\r\n \"drop\",\r\n function (evt) {\r\n let data = evt.dataTransfer.getData(\"text\/plain\");\r\n\r\n let item2 = document.getElementById(data);\r\n if (item2) {\r\n item1.appendChild(item2);\r\n }\r\n\r\n evt.preventDefault();\r\n },\r\n false\r\n);\r\n\r\nitem1.addEventListener(\r\n \"dragenter\",\r\n function (evt) {\r\n evt.preventDefault();\r\n },\r\n false\r\n);\r\n\r\nitem1.addEventListener(\r\n \"dragover\",\r\n function (evt) {\r\n evt.preventDefault();\r\n },\r\n false\r\n);\r\n<\/script>\r\n<\/pre>\n