Drag and drop avec une contsruction de div dynamique

Signaler
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
-
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>

A voir également:

5 réponses

Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
87
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>




Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

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
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
87
dans l'ensemble ça vas
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

Bonjour
Peux ton récupérer le contenu d'une balise avec ce code

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

Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
87
oui