Drag and drop avec une contsruction de div dynamique

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 3 mai 2016 à 15:43 - Dernière réponse : @karamel 1663 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 3 novembre 2018 Dernière intervention
- 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

@karamel 1663 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 3 novembre 2018 Dernière intervention - 3 mai 2016 à 16:41
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
titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 3 mai 2016 à 16:56
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
@karamel 1663 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 3 novembre 2018 Dernière intervention - 3 mai 2016 à 17:01
0
Merci
dans l'ensemble ça vas
Commenter la réponse de @karamel
titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 3 mai 2016 à 17:04
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
@karamel 1663 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 3 novembre 2018 Dernière intervention - 3 mai 2016 à 17:24
0
Merci
oui
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

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

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.