Problème de construction dynamique

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- - Dernière réponse : titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- 9 mai 2016 à 13:47
Bonjour,
Je souhaiterai superposer plusieurs images dans une meme zone
dans mon cas Iddrag
mais les images se positionnent en dessous?

var drag = document.createElement("div");
drag.className = "div-drag";
drag.id = "iddrag";
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);
}


Code complet

<!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;
}

.div-drop {

display: inline-block;
width: 50px;
height: 50px;
/* border: solid 1px black;*/
border-radius: 25px;
background-color: yellow;
}

.divabsolute {
top: 0px;
left: 0px;
}

.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('iddrag');
element.parentNode.removeChild(element);
var drag = document.getElementById('divdropt91')
var jeton = document.createElement("img");
jeton.className = "divabsolute";
jeton.src = "sdiv.png";
jeton.id = "iddrag";
jeton.setAttribute("draggable", "true");
// jeton.ondragstart = this.drag.bind(this);
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));
element = document.getElementById(iddrop);
contenu = element.innerHTML;
var contenu = document.getElementById(iddrag).src;
k = contenu.indexOf(".png");
var png = contenu.substring(k - 4, k + 4);
//alert (iddrag + "/" + iddrop + "/" + contenu + "/" + png);
var element = document.getElementById(iddrag);
document.getElementById(iddrag).src = "vide.png";
document.getElementById(iddrop).src = png;
}
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.className = "div-drop";
dv.id = "divdropt" + ((i*10)+j+1);
dv.ondrop = this.drop.bind(this);
dv.ondragover = this.allowDrop.bind(this);
var jeton = document.createElement("img");
jeton.id = "divdrags" + ((i * 10) + j + 1);
jeton.className = "divabsolute";
jeton.src = "vide.png";
jeton.setAttribute("draggable", "true");
jeton.ondragstart = this.drag.bind(this);
dv.appendChild(jeton);
cel.appendChild(dv);;
}
}
document.querySelector(".plateaucadre").appendChild(tbaide);
var drag = document.createElement("div");
drag.className = "div-drag";
drag.id = "iddrag";
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);
}
}

onload=function(){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>


Cordialement
Afficher la suite 

Votre réponse

2 réponses

Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
il faut mettre les elements en position absolute et le parent (l’élément conteneur)en position relative
Commenter la réponse de @karamel
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
0
Merci
merci une faute d'inattention
Apres correction quand je déplace le premier élément divdrage2 (la dernière image ajoutée) elle se déplace comme il faut
Par contre impossible de drag sur le divdrage1 et je supose ni le divdrage0
Par contre quand je valide le bouton lm'image divgrae1 se deplace bien, mais on ne peut pas faire de drag non plus de ce fait j'ai pu constater que le drag sur divdrage0 ne fonctionne pas non plus
Je ne comprend pas car les 3 images ont été crées dans la même boucle
Cordialement
Code corrigé
PS Merci pour ta réponse sur le mode objet, je progresse

<!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.className = "divabsolute";
jeton.src = "sdiv.png";
jeton.id = "iddrag";
jeton.setAttribute("draggable", "true");
// jeton.ondragstart = this.drag.bind(this);
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));
element = document.getElementById(iddrop);
contenu = element.innerHTML;
var contenu = document.getElementById(iddrag).src;
k = contenu.indexOf(".png");
var png = contenu.substring(k - 4, k + 4);
//alert (iddrag + "/" + iddrop + "/" + contenu + "/" + png);
var element = document.getElementById(iddrag);
document.getElementById(iddrag).src = "vide.png";
document.getElementById(iddrop).src = png;
}
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.className = "div-drop";
dv.id = "divdropt" + ((i*10)+j+1);
dv.ondrop = this.drop.bind(this);
dv.ondragover = this.allowDrop.bind(this);
var jeton = document.createElement("img");
jeton.id = "divdrags" + ((i * 10) + j + 1);
jeton.className = "divabsolute";
jeton.src = "vide.png";
jeton.setAttribute("draggable", "true");
jeton.ondragstart = this.drag.bind(this);
dv.appendChild(jeton);
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>

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.