Discussion :

[cris73]

Bonjour à tous,
j'utilise Scriptaculous et j'ai un problème pour créer plusieurs éléments droppables.

A chaque image créés et ajouté dans un div, je veux qu'elle soit droppable.

Voici le code :

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
26
27
28
29
 
 
function creationLigne(numLigne) 
{
  nouveauDiv = document.createElement("div"); // crée un nouvel élément div
  nouveauDiv.setAttribute("class","ligne");
  nouveauDiv.innerHTML='<img src="images/r0_0.gif" alt=""/>';  			
 
  for(var i=1 ; i<=4 ; i++)
  {
     id = numLigne*10+i;
     id = "el"+id;
     image = document.createElement("img"); // crée un nouvel élément div
     image.setAttribute("id",id);
     image.setAttribute("src","images/boardunitoff.gif");
     image.setAttribute("alt",null);
     image.setAttribute("class","drop");
     nouveauDiv.appendChild(image);	
  }
 
  document.getElementById("ligne").appendChild(nouveauDiv); // ajoute l'élément qui vient d'être créé et son contenu au DOM
 
  for(var i=0 ; i<4 ; i++)
  {
	id = numLigne*10+i;
	id = "el"+id;
	Droppables.add(id, { accept: 'draggable', onDrop: function (element) { $(id).src=element.src; } } );
   }
}

Le problème est que seule la dernière image de la dernière ligne devient droppable est non chacune d'elles.

Merci de vos réponses

[SpaceFrog]

Code :

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

1
2
3
4
5
 image = document.createElement("img"); // crée un nouvel élément div
     image.id=id;
     image.src="images/boardunitoff.gif";
     image.alt=null;
     image.className="drop";

Mais une variable nommée id ... c'est source d'ennuis
modifie et mets plutot monId ...

[DoubleU]

Pourquoi tu ne fusionnes pas tes deux boucles?

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
function creationLigne(numLigne) 
{
  nouveauDiv = document.createElement("div"); // crée un nouvel élément div
  nouveauDiv.setAttribute("class","ligne");
  nouveauDiv.innerHTML='<img src="images/r0_0.gif" alt=""/>';  			
 
  for(var i=1 ; i<=4 ; i++)
  {
     id = numLigne*10+i;
     id = "el"+id;
     image = document.createElement("img"); // crée un nouvel élément div
     image.setAttribute("id",id);
     image.setAttribute("src","images/boardunitoff.gif");
     image.setAttribute("alt",null);
     image.setAttribute("class","drop");
     nouveauDiv.appendChild(image);
     Droppables.add(image, { accept: 'draggable', onDrop: function (element) { image.src=element.src; } } );	
     document.getElementById("ligne").appendChild(nouveauDiv); // ajoute l'élément qui vient d'être créé et son contenu au DOM

}

[cris73]

J'ai fusionné vos deux solutions mais j'ai toujours le même problème, lors d'un drag sur une des images, seule la dernière créé est droppé.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for(var i=1 ; i<=4 ; i++)
{
  id = numLigne*10+i;
  id = "el"+id;
  image = document.createElement("img"); // crée un nouvel élément div
  image.id=id;
  image.src="images/boardunitoff.gif";
  image.className="drop";
 
  nouveauDiv.appendChild(image);
  Droppables.add(image, { accept: 'draggable', onDrop: function (element) { image.src=element.src; } } );
}

[SpaceFrog]

un id doit être UNIQUE sur une page ...
Vérifies ta source html générée poru voir si tu as bien les bons id

[DoubleU]

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
for(var i=1 ; i<=4 ; i++)
{
  id = numLigne*10+i;
  id = "el"+id;
  image = document.createElement("img"); // crée un nouvel élément div
  image.id=id;
  image.src="images/boardunitoff.gif";
  image.className="drop";
 
  nouveauDiv.appendChild(image);
  var handle = function(elt)
  {
     return function(element)
    {
        elt.src = element.src;
    }
  }(image)
  Droppables.add(image, { accept: 'draggable', onDrop: handle} );
}

[cris73]

je viens de trouver la solution, c'est au niveau de la fonction dans le Droppables.add

Code :

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

1
2
 
Droppables.add(image, { accept: 'draggable', onDrop: function (element,dropon) {dropon.src=element.src; } } );

Merci à tous