Supprimer une image par key event

Version imprimable

Bonjour à tous,

Je me tourne vers vous car après de multiples recherches sur le forum et sur internet, je ne trouve pas de solutions à mon problème.

Voici le tableau, j'ai une page sur laquelle l'utilisateur peut drag and dropper des images d'un div vers l'autre. La partie drag and drop fonctionne très bien, je me suis inspiré de l'exemple du site W3Schools.com.

Je voudrais, suite à l'ajout d'une image dans le div cible, pouvoir sélectionner l'image et la supprimer en faisant "suppr" sur le clavier. C'est là que j'ai besoin de vous.

J'arrive à donner le focus à mon image en la sélectionnant mais pas à récupérer les key event. Et je ne comprends pas pourquoi.

voici le code que j'utilise pour créer les images dans le div cible.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function drop(ev) { ev.preventDefault(); var x= ev.pageX; var y= ev.pageY; var id=ev.dataTransfer.getData("id"); //repositionnement dans le div cible if (id != null && id != ""){ var img = document.getElementById(id); img.style.top = y +'px'; img.style.left = x+'px'; }else{ //creation suite au drag and drop depuis le div source var imgSrc = ev.dataTransfer.getData("src"); var newImage = "<img id=\"img"+ imgCpt++ +"\" src="+imgSrc+" width=150 height=150 style=\" position:absolute; top:"+y+"px; left:"+x+"px;\" alt=\"no image available\" draggable=\"true\" ondragstart=\"drag(event)\" keydown=\"deleteImg(event)\" onclick=\"this.focus()\" focusable =\"true\" />"; var dropZone = ev.target; $(dropZone ).append(newImage); } }
Je ne rentre jamais dans ma fonction deleteImg, et je vois vraiment pas pourquoi.

J'espère qu'un œil nouveau et plus expérimenté que moi trouvera la solution.

ondragstart
onclick
keydown

Quel est l'intrus ?

:fleche: onkeydown

Pour rendre le code plus propre, remplace :

Code:

1
2
var newImage = "<img id=\"img"+ imgCpt++ +"\" src="+imgSrc+" width=150 height=150 style=\" position:absolute; top:"+y+"px; left:"+x+"px;\" alt=\"no image available\" 
draggable=\"true\" ondragstart=\"drag(event)\" keydown=\"deleteImg(event)\" onclick=\"this.focus()\" focusable =\"true\" />";

par :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var newImage = $("<img/>")
.attr({
  id: "img" + (imgCpt++),
  src: imgSrc,
  alt : "no image available",
  draggable: "true",
  focusable: "true"
})
.css({
   width: "150px",
   height: "150px",
   position: "absolute",
   top: y+"px",
   left: x+"px"
})
.on('dragstart', drag)
.on('keydown', deleteImg)
.on('click', function(){ this.focus(); });

quand même plus lisible 8-)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var newImage = $("<img/>")
.attr({
  id: "img" + (imgCpt++),
  src: imgSrc,
  alt : "no image available",
  draggable: "true",
  focusable: "true"
})
.css({
   width: "150px",
   height: "150px",
   position: "absolute",
   top: y+"px",
   left: x+"px"
})

Bof bof...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('<img>', {
  id: "img" + (imgCpt++),
  src: imgSrc,
  alt : "no image available",
  draggable: "true",
  focusable: "true",
  css: {
    width: "150px",
    height: "150px",
    position: "absolute",
    top: y+"px",
    left: x+"px"
  }
})

;)

18/12/2013, 20h11
NoSmoking
Bonjour,
je rajouterais que tant qu'à utiliser jQuery autant l'utiliser
Code:

1 2 3 var img = document.getElementById(id); img.style.top = y +'px'; img.style.left = x+'px';
ça fait moyen entre autre ;)