Bonjour !



J'ai un petit script permettant de déplacer des tableau pour les placer sur une carte...

Mais lorsque l'on a plusieurs tableau on peut placer que le premier, puis une fois celui-ci de placer on peut placer le deuxième...mais pas un autre !

J'aimerai que l'on puisse placer n'importe quel tableau dans l'ordre que l'on veut !

J'ai ça :

<img id="cadre_oeuvre" src="..." alt="image" />

<input type="hidden" id="idOeuvre" name="idOeuvre" value="..." />

Puis dans mon script :

$("#cadre_oeuvre").draggable({

		revert:		'invalid',

		zIndex: 1001

	});
......
...

Donc le problème c'est lorsque j'ai plusieurs tableau, ils ont tous pour id : cadre_oeuvre

Après j'ai essayé de leur donner un nom différent à chacun...

Mais du coups dans le javascript il prend toujours le premier

J'ai par exemple

cadre_oeuvre14
cadre_oeuvre64
cadre_oeuvre13

dans javascript il va prendre cadre_oeuvre14 d'office, alors que je voudrais pouvoir placer n'importe lequel des 3 !


Merci

Donne-leur une classe !

Ok je leur donne une classe, mais différente à chacune ?

Puis après je traite ça comment s'il te plait ?

Bah non justement la même à tous !

Et après tu fais $('.cadre_oeuvre') par exemple... Le sélecteur de classe de jQuery quoi... (sélecteur CSS...)

Mais je vois ça pas ce que ça change de prendre la classe plutôt que l'id ?


Je pourrais avoir une explication, histoire de comprendre merci

Bah ça change que tu ne peux avoir qu'un id est unique alors qu'une classe ne l'est pas...

Donc avec une classe tu peux sélectionner tous tes éléments d'un coup... C'était pas ce qui posait problème ?

Ah oui c'est vrai j'y avais pas pensé ! Merci !
Ca fonctionne, par contre le problème c'est que maintenant ça pose problème pour les placer !

Salut !

Tu peux détailler ton "ça pose problème pour les placer !" stp ?

Oui, une fois que je puisse déplacer n'importe quel tableau se situant en dessous de ma carte, je peux les placer là où il y a de la place :

$.ajax({

			   type: "POST",

			   url: "includes/carte_valider.php",

			   data: "positionX="+curseurDropX+"&positionY="+curseurDropY+"&idOeuvre="+$("#idOeuvre").val()+"&idCarte="+$("#idCarte").val(),

			   success: function(msg){

					if (msg == 1)

					{

						window.location.replace("musee.php?id="+$("#idCarte").val());

						//alert(curseurDropX+" "+curseurDropY);

					}

					else

					{

						alert(msg);

						$(".cadre_oeuvre").css("left",0);

						$(".cadre_oeuvre").css("top",0);	

					}

			   }

			});

Le problème ce n'est pas le premier tableau à placer, il marche impec, ce sont tous les autres, il me dit que la place est déjà prise !

Donc je pense que ce code là est fait pour 1 seule oeuvre, il prend que les coordonnées de la première donc les autres ne peuvent pas fonctionner !

Tu pourrais nous montrer ton code du drag'n'drop ?

Le html :

<img id="cadre_oeuvre" class="cadre_oeuvre" src="includes/oeuvres.php?id=<?php echo $donnees_attente['id']; ?>&type=drop" alt="image" />

	<input type="hidden" id="idOeuvre" class="idOeuvre" name="idOeuvre" value="<?php echo $donnees_attente['id_oeuvre']; ?>" />

	<input type="hidden" id="idCarte" class="idCarte" name="idCarte" value="<?php echo $idCarte; ?>" />

Le javascript !

$(".cadre_oeuvre").draggable({

		revert:		'invalid',

		zIndex: 1001

	});


	$("#carte").droppable({

	
		accept: '.cadre_oeuvre',

		activeClass: 'droppable-active',

		hoverClass: 'droppable-hover',

		drop: function(event, ui){

			

			// Position de la construction

			positionConstruction = $(".cadre_oeuvre").findPos();

			

			// Position du cadre de la carte

			positionCadreCarte = $("#carte").findPos();

		

			var curseurDropX = positionConstruction.x - positionCadreCarte.x - 1;

			var curseurDropY = positionConstruction.y - positionCadreCarte.y - 1;

			

			$.ajax({

			   type: "POST",

			   url: "includes/carte_valider.php",

			   data: "positionX="+curseurDropX+"&positionY="+curseurDropY+"&idOeuvre="+$("#idOeuvre").val()+"&idCarte="+$("#idCarte").val(),

			   success: function(msg){

					if (msg == 1)

					{

						window.location.replace("musee.php?id="+$("#idCarte").val());

						//alert(curseurDropX+" "+curseurDropY);

					}

					else

					{

						alert(msg);

						$(".cadre_oeuvre").css("left",0);

						$(".cadre_oeuvre").css("top",0);	

					}

			   }

			});

		}

	});

Bonjour !


Donc voilà le code ci-dessus, pouvez vous m'aider pour que je puisse améliorer le code de tel sorte que je puisse placer n'importe quel tableau sur ma carte !

Je crois que le problème se situe de la ligne 25 à la ligne 47 dans le code javascript !

Le code étant fait pour 1 tableau, il prend constamment la première oeuvre de la liste, du coups quand tu veux placer une autre oeuvres elle ne fonctionne pas !

Merci d'avance !


EDIT : j'ai fais des test et j'ai vu que toujours pour le 1er tableau a placé il n'y a aucun soucis mais pour tous les autres tableaux à placer positionConstruction.x et positionConstruction.y
ont toujours la même valeur pour n'importe quel tableau et a n'importe qu'elle place !!


Puis pour tous les tableaux que l'on peut placer l'idOeuvre est toujours égale à 15 pour toute les oeuvres, et 15 étant l'id de la première oeuvre !

S'il vous plait, peut-on m'aider ?

Je n'arrive pas à faire un drag and drop de plusieurs élément !

Je peux en déplacer plusieurs mais lorsqu'il s'agit de placer un élément quelque part il n'a pas le bon id (toujours l'id de la première image) !

Up