Sujet Précédent Sujet Suivant

Drag and drop avec une contsruction de div dynamique

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 3 mai 2016 à 15:43
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 3 mai 2016 à 17:24
Bonjour,
Je cherche à comprendre pourquoi mon drop ne fonctionne pas
Je sais parfaitement faire fonctionner un drag and drop sur un body construit
Mais je sèche sur un body construit dynamiquement
Le drop ne fonctionne pas
Voici le code 

<!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 {
            margin-left:35%;
    display:inline-block;
            width: 50px;
            height: 50px;
            border:solid 1px black;
            border-radius:25px;
            background-color: yellow;
         }
.divabsolute {
        top: 0px;
        left: 0px;
}
</style>
<script type="text/javascript">
function chifukoo(){

this.init();
}
    chifukoo.prototype.drag = function (target, ev) {
        ev.dataTransfer.setData('IdElement', target.id);
    }
    chifukoo.prototype.allowDrop = function (ev) {
        ev.preventDefault();
    }
chifukoo.prototype.drop = function (target, ev) {
    var iddrag = evt.dataTransfer.getData('IdElement');
    target.appendChild(document.getElementById(iddrag));
    ev.preventDefault();
}
chifukoo.prototype.init=function(){
	var drag = document.createElement("div");
	drag.className = "div-drag";
	    var jeton = document.createElement("img");
	    jeton.className = "divabsolute";
	    jeton.src = "sdiv.png";
	    jeton.id = "jeton01";
	    jeton.setAttribute("draggable", "true");
	    jeton.ondragstart = this.drag.bind(this, event);
	    drag.appendChild(jeton);
	    document.body.appendChild(drag);

	    var drop = document.createElement("div");
	    drop.className = "div-drop";
	    drop.ondrop = this.drop.bind(this);
	    drop.ondragover = this.allowDrop.bind(this);
	    document.body.appendChild(drop);
}
onload=function(){new chifukoo()}
</script>
</head>
<body>
       
</body>
</html>

5 réponses

Réponse 1 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 mai 2016 à 16:41
bonjour

tu gere mal les evenements 
jeton.ondragstart = this.drag.bind(this, event);


sur cette ligne event est inutile. 

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


pareille pour les parametres met juste ev et target.id doit etre ev.target.id et enfin met ev.preventDefault() en debut de script 

chifukoo.prototype.allowDrop = function (ev) {
        ev.preventDefault();
    }
chifukoo.prototype.drop = function (ev) {
ev.preventDefault();
    var iddrag = ev.dataTransfer.getData('IdElement');
    ev.target.appendChild(document.getElementById(iddrag));
    
}



<!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 {
            margin-left:35%;
    display:inline-block;
            width: 50px;
            height: 50px;
            border:solid 1px black;
            border-radius:25px;
            background-color: yellow;
         }
.divabsolute {
        top: 0px;
        left: 0px;
}
</style>
<script type="text/javascript">
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 iddrag = ev.dataTransfer.getData('IdElement');
    ev.target.appendChild(document.getElementById(iddrag));
    
}
chifukoo.prototype.init=function(){
	var drag = document.createElement("div");
	drag.className = "div-drag";
	    var jeton = document.createElement("img");
	    jeton.className = "divabsolute";
	    jeton.src = "sdiv.png";
	    jeton.id = "jeton01";
	    jeton.setAttribute("draggable", "true");
	    jeton.ondragstart = this.drag.bind(this);
	    drag.appendChild(jeton);
	    document.body.appendChild(drag);

	    var drop = document.createElement("div");
	    drop.className = "div-drop";
	    drop.ondrop = this.drop.bind(this);
	    drop.ondragover = this.allowDrop.bind(this);
	    document.body.appendChild(drop);
}
onload=function(){new chifukoo()}
</script>
</head>
<body>
       
</body>
</html>
0
Réponse 2 / 5
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
3 mai 2016 à 16:56
Merci pour la correction
dans l'ensemble est ce la bonne méthode pour faire du drag and drop de la façon dont le code est écrit?

Cordialement
0
Réponse 3 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 mai 2016 à 17:01
dans l'ensemble ça vas
0
Réponse 4 / 5
titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
3 mai 2016 à 17:04
Bonjour
Peux ton récupérer le contenu d'une balise avec ce code 

element = document.getElementById(iddrag);
    contenu = element.innerHTML;
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 mai 2016 à 17:24
oui
0
Rejoignez-nous