Discussion :

[pc152]

Bonjour,

Lors d'un drag and drop j'aimerais (si possible) récupérer l'id du composant survolé pour insérer en dessous le control que je déplace.

Merci de votre aide.

[Kaamo]

Salut !

Tu utilises une librairie ? Ou du JavaScript pur ? Tu peux le récupérer dans la fonction de callback que tu passes à la fonction qui permet de réaliser le drag :

Code :

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

1
2
3
function(event) {
  alert(event.target.id);
}

[pc152]

Je fais du javascript pur. Je comprend pas où je dois mettre ton bout de code.

[Kaamo]

Peux-tu nous montrer ton bout de code qui permet de réaliser le drag and drop ?

Le bout de code ci-dessus est une fonction anonyme souvent utilisée pour les événements. Par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="to_drag" draggable="true">
  attrape moi !
</div>
<br><br>
<div id="to_drop" droppable="true">
  jette moi ici !
</div>
 
<script>
document.getElementById('to_drop').ondragover = function(event) {
    console.log(event.target.id); // to_drop est affiché dès que tu passes au dessus
};
</script>

[sekaijin]

Bonjour,

Lors d'un drag and drop j'aimerais (si possible) récupérer l'id du composant survolé pour insérer en dessous le control que je déplace.

Merci de votre aide.

Heu dois être complètement à la masse, je ne comprends pas l'intérêt de la chose. mais si tu mets un handler sur un objet pour géré le ondragover, l'id tu l'as c'est this.id

Code :

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

1
2
3
document.getElementById('to_drop').ondragover = function(event) {
    console.log(this.id); // to_drop est affiché dès que tu passes au dessus
};

mieux lorsque tu code tu le connais déjà

Code :

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

1
2
3
document.getElementById('to_drop').ondragover = function(event) {
    console.log('to_drop'); // to_drop est affiché dès que tu passes au dessus
};

quant à insérer quelque chose au dessus pas besoin d'id

Code :

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

1
2
3
4
document.getElementById('to_drop').ondragover = function(event) {
  var element = document.createElement('DIV');
  this.parent.insertBefore(element, this); //insère avant sans avoir d'id 
};

A+JYT

[Kaamo]

Heu dois être complètement à la masse

Non, c'est moi qui devais être à la masse ce jour là !