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
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