Discussion :

[Ogtraba]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SylvainPV]

ondragstart
onclick
keydown

Quel est l'intrus ?

onkeydown

Pour rendre le code plus propre, remplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
  }
})

[NoSmoking]

Bonjour,
je rajouterais que tant qu'à utiliser jQuery autant l'utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var img = document.getElementById(id);
img.style.top = y +'px';
img.style.left = x+'px';

ça fait moyen entre autre