Bonjour,
Je n'arrive pas à trouver sur le web comment récupérer l'id de l'image et l'id du parent en cliquant sur l'image ou q'elle soit
Pouvez vous m'aider?
le code ne fonctionnat pas est dans la fonction dblclik
Cordialement
<!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;
position:relative;
}
.div-drop {
display: inline-block;
width: 50px;
height: 50px;
/* border: solid 1px black;*/
border-radius: 25px;
background-color: yellow;
position:relative;
}
.divabsolute {
top: 0px;
left: 0px;
position:absolute;
}
.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('divdrage1');
element.parentNode.removeChild(element);
var drag = document.getElementById('divdropt91')
var jeton = document.createElement("img");
jeton.id = "divdrage1";
jeton.className = "divabsolute";
jeton.src = "sdiv.png";
jeton.setAttribute("draggable", "true");
jeton.ondragstart = inst.drag;
drag.appendChild(jeton);
}
function chifukoo() {
this.init();
}
chifukoo.prototype.dblclick = function (ev) {
var element = document.getElementById(ev.target.id);
var contenu = element.innerHTML;
var iddrag = ev.dataTransfer.getData('IdElement');
alert(iddrag);
}
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.id = "divdropt" + ((i * 10) + j + 1);
dv.className = "div-drop";
dv.ondrop = this.drop.bind(this);
dv.ondragover = this.allowDrop.bind(this);
dv.ondblclick = this.dblclick.bind(this);
cel.appendChild(dv);;
}
}
document.querySelector(".plateaucadre").appendChild(tbaide);
var drag = document.createElement("div");
drag.className = "div-drag";
drag.id = "iddrag";
drag.ondrop = this.drop.bind(this);
drag.ondragover = this.allowDrop.bind(this);
var j = 1;
document.body.appendChild(drag);
for (j = 0; j < 3; j++) {
var jeton = document.createElement("img");
jeton.id = "divdrage" + j;
jeton.className = "divabsolute";
jeton.src = "sdiv.png";
jeton.setAttribute("draggable", "true");
jeton.ondragstart = this.drag.bind(this);
drag.appendChild(jeton);
}
}
var inst = ''
onload=function(){inst = 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>
- Messages postés
- 28009
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 2 avril 2020
324heu... le code que tu nous montre peut se résumer en :