Sujet Précédent Sujet Suivant

Problème de construction dynamique

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 8 mai 2016 à 13:00
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre 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

2 réponses

Réponse 1 / 2
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
9 mai 2016 à 10:25
il faut mettre les elements en position absolute et le parent (l’élément conteneur)en position relative
0
Réponse 2 / 2
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
9 mai 2016 à 13:47
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>
0

Discussions similaires

Correction examen c++ aide
Majestick -
Majestick -

12 réponses
realisation d'un cv dynamique
irinohdk -
cod57 -

1 réponse
La suite de chiffres en pyramide
Taous -
jordane45 -

3 réponses
Passer un tableau dynamique en paramètre
freepouy18 -
freepouy18 -

19 réponses
Devis pour un site
Hurilam -
paulschnell -

9 réponses
Rejoignez-nous