{"id":1273,"date":"2024-04-16T10:17:22","date_gmt":"2024-04-16T01:17:22","guid":{"rendered":"https:\/\/takaya-com.jp\/archives\/?p=1273"},"modified":"2024-04-16T10:17:22","modified_gmt":"2024-04-16T01:17:22","slug":"dragdrop","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2024\/04\/dragdrop\/","title":{"rendered":"\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u306eJavascript"},"content":{"rendered":"

\u4eca\u56de\u306f\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u4f7f\u3063\u305fJavascript\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

flex\u3067\u4e26\u3079\u305f\u8981\u7d20\u3092\u300cdragstart\u3001drop\u3001dragenter\u3001dragleave\u3001dragover\u300d\uff15\u3064\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u4f7f\u3063\u3066
\n\u30c9\u30e9\u30c3\u30af\uff06\u30c9\u30ed\u30c3\u30d7\u306e\u52d5\u304d\u3092\u3064\u304f\u308a\u307e\u3059\u3002\u5b9f\u88c5\u3059\u308b\u3068\u76f4\u611f\u7684\u306b\u79fb\u52d5\u3067\u304d\u308b\u306e\u3067\u3068\u3063\u3066\u3082\u4fbf\u5229\u3067\u3059\u3002
\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

\r\n<body>\r\n    <h3>\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7<\/h3>\r\n    <div class="flex">\r\n        <div id="1" class="drag item">drag1<\/div>\r\n        <div id="2" class="drop item">drop1<\/div>\r\n        <div id="3" class="drop item">drop2<\/div>\r\n        <div id="4" class="drop item">drop3<\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/pre>\n
\u25bcCSS<\/p>\n
\r\n<style>  \r\nbody {\r\n  text-align: center;\r\n}\r\n\r\n.flex {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.item {\r\n  line-height: 80px;\r\n  height: 80px;\r\n  width: 80px;\r\n  border: 1px solid gray;\r\n}\r\n\r\n.drag.item {\r\n  background-color: skyblue;\r\n}\r\n\r\n.dragging.item {\r\n  background-color: skyblue;\r\n  opacity: 0.3;\r\n}\r\n<\/style>\r\n<\/pre>\n
\u25bcJavascript<\/p>\n
\r\n<script>\r\ndocument.querySelector(\".drag.item\").draggable = true;\r\ndocument.querySelector(\".drag.item\").addEventListener(\"dragstart\", onDragStart);\r\n\r\ndocument.querySelectorAll(\".drop.item\").forEach((element) => {\r\n    element.addEventListener(\"drop\", onDrop);\r\n    element.addEventListener(\"dragover\", onDragover);\r\n    element.addEventListener(\"dragenter\", onDragenter);\r\n    element.addEventListener(\"dragleave\", onDragleave);\r\n});\r\n\r\nfunction onDrop(event) {\r\n    event.currentTarget.classList.remove(\"dragging\");\r\n    const items = [...document.querySelectorAll(\".item\")];\r\n    if (items.indexOf(event.currentTarget) === 0) {\r\n        event.currentTarget.before(document.getElementById(event.dataTransfer.getData(\"text\")));\r\n    } else {\r\n        event.currentTarget.after(document.getElementById(event.dataTransfer.getData(\"text\")));\r\n    }\r\n}\r\n\r\nfunction onDragStart(event) {\r\n    event.dataTransfer.setData(\"text\", event.currentTarget.id);\r\n}\r\n\r\nfunction onDragenter(event) {\r\n    event.currentTarget.classList.toggle(\"dragging\");\r\n}\r\n\r\nfunction onDragover(event) {\r\n    event.preventDefault();\r\n}\r\nfunction onDragleave(event) {\r\n    event.currentTarget.classList.toggle(\"dragging\");\r\n}\r\n<\/script>\r\n<\/pre>\n
\u30c7\u30e2\u306e\u4f5c\u6210\u306b\u306f\u3001\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u300eJavaScript \u3067 \u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3092\u3084\u3063\u3066\u307f\u308b-@sueasen\u300f<\/a>\u3055\u3093\u3092\u53c2\u8003\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4eca\u56de\u306f\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u4f7f\u3063\u305fJavascript\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 flex\u3067\u4e26\u3079\u305f\u8981\u7d20\u3092\u300cdragstart\u3001drop\u3001dragenter\u3001dragleave\u3001dragover\u300d\uff15\u3064\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u4f7f\u3063\u3066 \u30c9\u30e9 […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1273"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=1273"}],"version-history":[{"count":11,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1312"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}