具体的なコードは次のとおりです。
<!-- コードは次のとおりです。下に、テストに使用した 9 つの 250*250 画像スライスを示します--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>dragドラッグ</タイトル> <スタイル> .box{ float: left; } img{ width: 150px; height: 150px;マージン: 80px 自動; パディング: 5px; 幅: 460px; } </style></head><body> <div id=puzzle> <div class=box><img <div class=box><img <div class; =box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img </div> <script> var image = document.getElementsByTagName(img); var box = document.getElementsByClassName(box); var nowImageBox; ; var thenImage; for(let i=0;i<image.length;i++){source = Picture+i+.jpg; image[i].setAttribute(src,source); image[i].onmousedown = function(){ nowImage = this; nowImageBox = this.parentNode } box[i].ondragover = function(event); ); //デフォルトではデータや要素を他の要素に配置できない ondragover イベントのデフォルト動作を削除します。} box[i].ondrop = function(event){ thenImage = box[i].childNodes[0]; box[i].appendChild(nowImage) } } </script></body></html>要約する上記は、エディターによって導入された HTML5 のドラッグ アンド ドロップ機能によって実装されたジグソーパズルです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！