이 기사에서는 예제 코드를 통해 HTML5 드래그 앤 드롭 기능으로 구현된 직소 퍼즐을 소개합니다. 코드가 간단하고 이해하기 쉽고, 매우 좋으며, 도움이 필요한 친구들이 참고할 수 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.
구체적인 코드는 다음과 같습니다:
<!--代码如下,最下面给出了我测试用的9张250*250的图片切片--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>drag拖拽</title> <style> .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{ font-size: 0; margin:80px auto; padding: 5px; width: 460px; } </style> </head> <body> <p id="puzzle"> <p class="box"><img alt="1"></p> <p class="box"><img alt="2"></p> <p class="box"><img alt="3"></p> <p class="box"><img alt="4"></p> <p class="box"><img alt="5"></p> <p class="box"><img alt="6"></p> <p class="box"><img alt="7"></p> <p class="box"><img alt="8"></p> <p class="box"><img alt="9"></p> </p> <script> var image = document.getElementsByTagName("img"); var box = document.getElementsByClassName("box"); image.draggable = true; var source = ""; var nowImage; 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){ event.preventDefault(); //去除ondragover事件的默认行为,该行为默认无法将数据或者元素放置到其他元素 } box[i].ondrop = function(event){ thenImage = box[i].childNodes[0]; box[i].appendChild(nowImage); nowImageBox.appendChild(thenImage); } } </script> </body> </html>
#🎜 🎜 #
요약
위에 소개해드린 내용입니다 HTML5 드래그 앤 드롭 기능은 직소 퍼즐의 모든 내용을 구현하므로 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면Html5 비디오 튜토리얼을 방문하세요!
관련 추천: HTML5 온라인 설명서위 내용은 HTML5 드래그 앤 드롭 기능으로 구현된 퍼즐 게임의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!