Le code spécifique est le suivant :
<!--Le code est le suivant. Le bas montre les 9 tranches d'image 250*250 que j'ai utilisées pour les tests--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>drag Faites glisser</title> <style> .box{ float: left; } img{ width: 150px height:150px; marge : 80 px auto ; remplissage : 5 px ; largeur : 460 px ; } </style></head><body> <div id=puzzle> <div class=box><img <div class=box><img <div classe =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 thenImage; for(let i=0;i<image.length;i++){ source = image+i+.jpg; image[i].setAttribute(src,source); image[i].onmousedown = function(){ nowImage = this; nowImageBox = this.parentNode; } box[i].ondragover = function(event){ event.preventDefault( ); //Supprimer le comportement par défaut de l'événement ondragover, qui ne peut pas placer de données ou d'éléments sur d'autres éléments par défaut} box[i].ondrop = function(event){ thenImage = box[i].childNodes[0]; box[i].appendChild(nowImage); nowImageBox.appendChild(thenImage); RésumerCe qui précède est le puzzle implémenté par la fonction glisser-déposer HTML5 introduite par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !