td\u8981\u7d20\u306e\u4e2d\u306b\u3042\u308bdiv\u8981\u7d20\u3092\u30c9\u30e9\u30c3\u30b0\u3067\u5225\u306etd\u8981\u7d20\u306e\u4e2d\u306b\u79fb\u52d5\u3002div\u8981\u7d20\u306b\u306finput\u30bf\u30b0\u3067\u30c7\u30fc\u30bf\u3092\u6301\u305f\u305b\u30af\u30ea\u30c3\u30af\u6642\u306b\u53d6\u5f97\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>test<\/title>\r\n\r\n <style>\r\n\r\n *{\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n td{\r\n border: solid 1px #ccc;\r\n width:300px;\r\n height:300px;\r\n }\r\n\r\n .container{\r\n background-color: black;\r\n padding: 2px;\r\n\r\n height: 40px;\r\n width: 290px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .moveArea{\r\n width: 10%;\r\n background-color: red;\r\n }\r\n\r\n\r\n .textArea{\r\n width: 89%;\r\n background-color: green;\r\n }\r\n\r\n .dataArea{\r\n width: 1%;\r\n background-color: blue;\r\n }\r\n\r\n .drag {\r\n cursor: move;\r\n position: absolute;\r\n z-index: 1000;\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<table>\r\n<tr><td><\/td><td><\/td><tr>\r\n<tr><td><\/td><td id=\"start\"><\/td><tr>\r\n<\/table>\r\n\r\n<input type=\"textbox\" id=\"target_id\">\r\n<input type=\"textbox\" id=\"target_age\">\r\n\r\n<script>\r\n\r\nwindow.onload = startup;\r\n\r\nfunction startup(){\r\n \r\n setup_rect({\"caption\":\"A\u90e8\u54c1\",\"id\":\"1\",\"age\":\"2\"});\r\n setup_rect({\"caption\":\"B\u90e8\u54c1\",\"id\":\"2\",\"age\":\"3\"});\r\n\r\n}\r\n\r\nfunction setup_rect(value_list){\r\n\r\n let containerElement = document.createElement(\"div\");\r\n containerElement.classList.add(\"container\");\r\n\r\n let moveAreaElement = document.createElement(\"div\");\r\n moveAreaElement.addEventListener('mousedown', mouse_down);\r\n moveAreaElement.innerHTML = \"\";\r\n moveAreaElement.classList.add(\"moveArea\");\r\n containerElement.appendChild(moveAreaElement);\r\n\r\n let textAreaElement = document.createElement(\"div\");\r\n textAreaElement.addEventListener('click', text_click);\r\n textAreaElement.innerHTML = value_list[\"caption\"];\r\n textAreaElement.classList.add(\"textArea\");\r\n containerElement.appendChild(textAreaElement);\r\n\r\n let dataAreaElement = document.createElement(\"div\");\r\n dataAreaElement.innerHTML = \r\n \"<input type='hidden' name='id' value='\" + value_list[\"id\"] + \"'>\" + \r\n \"<input type='hidden' name='age' value='\" + value_list[\"age\"] + \"'>\";\r\n dataAreaElement.classList.add(\"dataArea\");\r\n containerElement.appendChild(dataAreaElement);\r\n\r\n let target = document.querySelector(\"#start\");\r\n target.appendChild(containerElement);\r\n}\r\n\r\nfunction text_click(event){\r\n\r\n let target_id = document.getElementById(\"target_id\");\r\n let target_age = document.getElementById(\"target_age\");\r\n\r\n for(let el of this.nextElementSibling.children){\r\n\r\n if (el.getAttribute(\"name\") === \"id\") target_id.setAttribute(\"value\", el.getAttribute(\"value\"));\r\n if (el.getAttribute(\"name\") === \"age\") target_age.setAttribute(\"value\", el.getAttribute(\"value\"));\r\n \r\n }\r\n}\r\n\r\nfunction mouse_move(event){\r\n\r\n let target = document.getElementsByClassName(\"drag\")[0];\r\n\r\n let x = event.pageX - spaceX;\r\n let y = event.pageY - spaceY;\r\n\r\n target.style.top = y + \"px\";\r\n target.style.left = x + \"px\";\r\n}\r\n\r\nlet spaceX = 0;\r\nlet spaceY = 0;\r\n\r\nfunction mouse_down(event){\r\n\r\n spaceX = event.offsetX;\r\n spaceY = event.offsetY;\r\n\r\n let target = this.parentNode;\r\n target.classList.add(\"drag\");\r\n\r\n mouse_move(event);\r\n document.addEventListener('mousemove', mouse_move);\r\n target.addEventListener('mouseup', mouse_up);\r\n}\r\n\r\nfunction mouse_up(event){\r\n\r\n spaceX = 0;\r\n spaceY = 0;\r\n\r\n this.classList.remove(\"drag\");\r\n document.removeEventListener(\"mousemove\", mouse_move);\r\n this.removeEventListener('mouseup', mouse_up);\r\n\r\n let x = event.clientX;\r\n let y = event.clientY;\r\n\r\n let el = document.elementFromPoint(x,y);\r\n if (el.tagName === \"TD\") el.appendChild(this);\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
td\u8981\u7d20\u306e\u4e2d\u306b\u3042\u308bdiv\u8981\u7d20\u3092\u30c9\u30e9\u30c3\u30b0\u3067\u5225\u306etd\u8981\u7d20\u306e\u4e2d\u306b\u79fb\u52d5\u3002div\u8981\u7d20\u306b\u306finput\u30bf\u30b0\u3067\u30c7\u30fc\u30bf\u3092\u6301\u305f\u305b\u30af\u30ea\u30c3\u30af\u6642\u306b\u53d6\u5f97\u3002 <!DOCTYPE html> <html lang=”ja”> & … <\/p>\n