Drag and drop avec une contsruction de div dynamique

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
- - Dernière réponse : @karamel
Messages postés
1695
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2019
- 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>

Afficher la suite 

Votre réponse

5 réponses

Messages postés
1695
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2019
38
0
Merci
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>




Commenter la réponse de @karamel
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
0
Merci
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
Commenter la réponse de titan3131
Messages postés
1695
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2019
38
0
Merci
dans l'ensemble ça vas
Commenter la réponse de @karamel
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
0
Merci
Bonjour
Peux ton récupérer le contenu d'une balise avec ce code

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

Commenter la réponse de titan3131
Messages postés
1695
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2019
38
0
Merci
oui
Commenter la réponse de @karamel