Drag and drop probleme de superposition d'image

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 10 mai 2016 à 03:09 - Dernière réponse : jordane45 21438 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention
- 11 mai 2016 à 18:31
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 

Votre réponse

2 réponses

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 11 mai 2016 à 16:52
0
Merci
J'ai trouvé pourquoi
Problème résolu
jordane45 21438 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 11 mai 2016 à 18:31
Dans ce cas .... mets donc la question en RESOLU.

..... et puis.... poste la solution sur le forum .. qui sait...ça pourrait interesser d'autres internautes.....
Commenter la réponse de titan3131

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.