Bonjour,
J'ai crée des div dynamiquement
quand je déplace les images dans le tableau pas de soucis
mais si je replace les images dans la zone de départ, les images ne se superpose pas mais s'imbrique les une dans les autres
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> <style type="text/css"> body { background-color: #9CB7D4; } .div-drag { margin-left: 35%; display: inline-block; width: 50px; height: 50px; border: solid 1px black; border-radius: 25px; background-color: yellow; position:relative; } .div-drop { display: inline-block; width: 50px; height: 50px; /* border: solid 1px black;*/ border-radius: 25px; background-color: yellow; position:relative; } .divabsolute { top: 0px; left: 0px; position:absolute; } .plateaucadre{ margin-left:35%; height:544px; width:544px; background-size: 100% 100%; border:solid 2px black; border-radius:10px; background-color: deepskyblue; } .tbaide{ position: relative; display:inline-block; margin-left: 2px; margin-top: 2px; float:left; font-size:0; border-radius:8px; background-color: red;; } .tbaide td{ height:50px; width:50px; margin: 0px; padding:0px; border-radius:50px; background-color: yellow; } .plateaucadre{ margin-left:50%; margin-top: 5px; height:525px; width:525px; background-size: 100% 100%; /*background-image:url("image/game.jpg");*/ border:solid 2px black; border-radius:10px; background-color: deepskyblue;; } .valideroperation { margin-left:50%; display: inline-block; width: 50px; height: 50px; background: url(valider.png); border: solid 0px black; } </style> <script type="text/javascript"> function valideroperation () { var element = document.getElementById('divdrage1'); element.parentNode.removeChild(element); var drag = document.getElementById('divdropt91') var jeton = document.createElement("img"); jeton.id = "divdrage1"; jeton.className = "divabsolute"; jeton.src = "sdiv.png"; jeton.setAttribute("draggable", "true"); jeton.ondragstart = inst.drag; drag.appendChild(jeton); } function chifukoo() { this.init(); } chifukoo.prototype.drag = function (ev) { ev.dataTransfer.setData('IdElement', ev.target.id); } chifukoo.prototype.allowDrop = function (ev) { ev.preventDefault(); } chifukoo.prototype.drop = function (ev) { ev.preventDefault(); var element = document.getElementById(ev.target.id); var contenu = element.innerHTML; var iddrag = ev.dataTransfer.getData('IdElement'); var iddrop = element.id var zdrag = iddrag.substring(0, 8); var zdrop = iddrop.substring(0, 8); alert("iddrag =" + iddrag + "/iddrop =" + iddrop + "/zdrag =" +zdrag + "/zdrop =" + zdrop + "/contenu cible =" + contenu.length); ev.target.appendChild(document.getElementById(iddrag)); } chifukoo.prototype.init = function () { tbaide = document.createElement("table"); tbaide.className = "tbaide"; for (var i = 0; i < 10; i++) { var wor = tbaide.insertRow(i); for (var j = 0; j < 10; j++) { var cel = wor.insertCell(); var dv = document.createElement("div"); dv.id = "divdropt" + ((i * 10) + j + 1); dv.className = "div-drop"; dv.ondrop = this.drop.bind(this); dv.ondragover = this.allowDrop.bind(this); cel.appendChild(dv);; } } document.querySelector(".plateaucadre").appendChild(tbaide); var drag = document.createElement("div"); drag.className = "div-drag"; drag.id = "iddrag"; drag.ondrop = this.drop.bind(this); drag.ondragover = this.allowDrop.bind(this); var j = 1; document.body.appendChild(drag); for (j = 0; j < 3; j++) { var jeton = document.createElement("img"); jeton.id = "divdrage" + j; jeton.className = "divabsolute"; jeton.src = "sdiv.png"; jeton.setAttribute("draggable", "true"); jeton.ondragstart = this.drag.bind(this); drag.appendChild(jeton); } } var inst = '' onload=function(){inst = new chifukoo()} </script> </head> <body> <div class="plateaucadre"> </div> <INPUT id='valideroperation' class='valideroperation' type="button" onclick="javascript:valideroperation()" title="Valider l'opération"> </body> </html>
Afficher la suite
11 mai 2016 à 18:31
..... et puis.... poste la solution sur le forum .. qui sait...ça pourrait interesser d'autres internautes.....