Comment affecter a une div créer dynamiquement ondragstart [Résolu]

Question

Posez votre question Signaler Répondre au sujet

Comment affecter a une div créer dynamiquement ondragstart [Résolu]

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 5 mai 2016 à 11:17 - Dernière réponse : titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention

- 9 mai 2016 à 19:18

Javascript / DHTML Posez votre question Signaler Répondre au sujet

Bonjour,
J'ai créé dynamiquement un tableau de 100 case dont l'id est divdropt de 1 à 100
J'ai crée dynamiquement une image avec Id divdrags1
En cliquant sur le bouton valider, je souhaite déplacer l'image dans divdropt91
Je le fait parfaitement en supprimant l'image de la div contenant l'image et créer une image dans la div divdropt91
Le probleme c'est que je n'arrive pas à mettre l'attribut ondragstart dans la nouvelle image créée qui de ce fait ne peut plus se déplacer dans la grille
j'ai esssayé avec le code mais celà ne fonctionne pas


jeton.ondragstart = this.drag.bind(this);

Pouvez vous m'aider


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


}




	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);
	            cel.appendChild(dv);;	
	        }
	    }


	    document.querySelector(".plateaucadre").appendChild(tbaide);


	 


	var drag = document.createElement("div");
	drag.className = "div-drag";
	drag.id = "iddrag";
	    var jeton = document.createElement("img");
	    jeton.className = "divabsolute";
	    jeton.src = "sdiv.png";
	    jeton.id = "divdrags1";
	    jeton.setAttribute("draggable", "true");
	    jeton.ondragstart = this.drag.bind(this);
	    drag.appendChild(jeton);
	    document.body.appendChild(drag);
	    

}

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

5 réponses

Répondre au sujet

Signaler Commenter la réponse de @karamel

@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 6 mai 2016 à 10:40

0

Utile

1

comme la méthode de programation est orienté objet la fonction doit etre dans l'objet mais la elle est hors de l'objet.

pour éviter de se compliqué on vas creer un lien ver l'objet par l'intermédiaire d'une variable il faut modifier la fin du code en ajoutant une variable global qui sera le lien vers l'objet

var inst=''

onload=function(){inst=new chifukoo()}

et le code qui bloque deviend

jeton.ondragstart = inst.drag;

Signaler Commenter la réponse de titan3131

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 6 mai 2016 à 11:27

merci
Afin de bien comprendre la programmation objet
a partir du moment ou on fait appel a un élément orienté objet, si on fait appel à cet élément, celui ci nous connecte dans l'objet?
Cordialement

Signaler Commenter la réponse de @karamel

@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - Modifié par kazma le 6/05/2016 à 11:55

0

Utile

2

il s'agit du contexte que represente this

si on veut reste dans le contexte la fonction doit etre rataché au prototype de l'objet

chifukoo.prototype.valideroperation=function() {
           
                    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);
            

        }

il faudra initialisé le onclick de l'input vers l'objet dans la fonction init

document.getElementById('valideroperation').onclick=this.valideroperation.bind(this)

    <input id='valideroperation' class='valideroperation' type="button" title="Valider l'opération">

rien ne sert de courir il faut partir a point.
cours Forest cours !

Signaler Commenter la réponse de titan3131

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 6 mai 2016 à 17:09

merci
je vais potasser
Cordialement

Signaler Commenter la réponse de titan3131

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 9 mai 2016 à 19:18

Bonjour
Comment peut-on rendre une image non dropable et vice versa
Cordialement

Comment affecter a une div créer dynamiquement ondragstart [Résolu]

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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