구체적인 코드는 다음과 같습니다.
<!--아래 코드는 테스트에 사용한 250*250 그림 조각 9개입니다.--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>drag. 드래그</title> <style> .box{ float: left } img{ 너비: 150px; 높이: 150px } #puzzle{ 글꼴 크기: 0; 여백:80px 자동; 패딩: 5px; 너비: 460px; } </style></head><body> <div id=puzzle> <div class=box><img <div class=box><img <div class =box><img <div 클래스=상자><img <div 클래스=상자><img <div 클래스=상자><img <div 클래스=상자><img <div 클래스=상자><img <div class=box><img </div> <script> var image = document.getElementsByTagName(img); var box = document.getElementsByClassName(box); image.draggable = true; ; var thenImage; for(let i=0;i<image.length;i++){ 소스 = picture+i+.jpg; image[i].setAttribute(src,source); image[i].onmousedown = function(){ nowImage = this; nowImageBox = this.parentNode; } box[i].ondragover = function(event){ event.preventDefault( ); //기본적으로 데이터나 요소를 다른 요소에 배치할 수 없는 ondragover 이벤트의 기본 동작을 제거합니다.} box[i].ondrop = function(event){ thenImage = box[i].childNodes[0]; box[i].appendChild(nowImage); nowImageBox.appendChild(thenImage) } </script></body></html> 요약위 내용은 에디터가 소개한 HTML5 드래그 앤 드롭 기능으로 구현한 직소퍼즐입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!