Déplacer des images au clic Js

[Pompom]

Bonjours, je débute dans le js, et je voudrais pouvoir faire déplacer des images sur une page html avec du js, Sauf que le problème est que lorsque je clic sur une images, elle va se placer a l'endroit prévu mais âpres je ne peux plus la faire bouger, je doit refresh la page pour la refaire venir au point de départ.

Voici le code:
-----------------------------------------------------------------------------------------------------------
<!-- La zone qui comprend les images à sélectionner -->

<div id="zoneEchantillon">
<div id="title" style="text-align: right;padding-right: 10px">A choisir</div>

<div id="echantillon" style="text-align: right;padding-right: 10px">
<img src="Debut.jpg" height="30" width="30">
<img src="Etape1.jpg" height="30" width="30">
<img src="Etape2.jpg" height="30" width="30">
<img src="Tempo.jpg" height="30" width="30">
<img src="Output.jpg" height="30" width="30">
<img src="Input.jpg" height="30" width="30">
<br>
<img src="Condition.jpg" height="30" width="30">
</br>
</div>

</div>

<!-- la zone avec les 3 images sélectionnées -->
<div id="selection"style="text-align: center;padding-right: 10px">
<div id="title">Assemblez votre shémas</div>
</div>

<!--la zone de texte qui apparaît lors du survol d'une image, par défaut elle sera invisible -->
<div id="texte">

</div>

<script>
$( document ).ready(function() {
$("#echantillon img").click(function() {
$("#selection").append('<div class="choisie"><img src="'+$(this).attr('src')+'"></div>');
$(this).remove()
});
});
</script>


--------------------------------------------------------------------------------------------------------------
Le but est de faire une sorte de Grafcet mais si l'on se trompe d'image, pouvoir revenir en arrière plutôt que devoir tout recommencé.

Merci de votre aide et de votre temps.
Cordialement

[webmaster]

Bonjour,

Pour pouvoir revenir en arrière, il faudrait ajouter un événement sur le nouvel élément créé.
Voici une proposition :

Code : Tout sélectionner

<div id="zoneEchantillon">
<div id="title" style="text-align: right;padding-right: 10px">A choisir</div>

<div id="echantillon" style="text-align: right;padding-right: 10px">
<img src="Debut.jpg" height="30" width="30" id="img1">
<img src="Etape1.jpg" height="30" width="30" id="img2">
<img src="Etape2.jpg" height="30" width="30" id="img3">
<img src="Tempo.jpg" height="30" width="30" id="img4">
<img src="Output.jpg" height="30" width="30" id="img5">
<img src="Input.jpg" height="30" width="30" id="img6">
<br>
<img src="Condition.jpg" height="30" width="30" id="img7">
</br>
</div>

</div>

<!-- la zone avec les 3 images sélectionnées -->
<div id="selection"style="text-align: center;padding-right: 10px">
<div id="title">Assemblez votre shémas</div>
</div>

<!--la zone de texte qui apparaît lors du survol d'une image, par défaut elle sera invisible -->
<div id="texte">

</div>

<script>
function reverse(elt, id) {
  $(elt).remove();
  $("#"+id).show();
}
$( document ).ready(function() {
  $("#echantillon img").click(function() {
    $("#selection").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
    $(this).hide();
  });
});
</script>

[Pompom]

ouaaa
C'est exactement ce que je voulais, merci beaucoup, sa fait quelque jour que je me creuse la tête pour avoir ce résultat avec plein d’échec. A force j'avais compris que je devais modifier le script du js mais j'y arrivais pas, tu me sauve de fou.

Mais juste comme sa;
--------------------------------------------------------------------------------------------------------------------------------------
$("#selection").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
--------------------------------------------------------------------------------------------------------------------------------------
Sa signifie quoi exactement stp cette ligne précise? C'est celle que tu as clairement modifier, jetais perdu dessus. Merci encore pour ton aide précieuse.

[Pompom]

Oups, euh en fait le programme que tu ma résolus, a un léger petit problème, Quand on clic sur une petite image, pour la positionner, elle se retire de son emplacement de base pour s'ajouter a l'emplacement prévu, le problème est que il y aura des images que j'ajouterai plus tard qui devront s’utilise bien plus que 1 fois, j'avais régler ce problème en supprimant la ligne.

$(this).remove();

mais tu la remplacer par:

$(this).hide();

Sauf que j'ai essayer de voir si il faillais faire de même sauf que sa ne fonctionne plus âpres.
Désoler, je suis grave nul en js, a vrai dire j'en ai jamais fait a part cette semaine merci de ton aide.

[webmaster]

Le onclick="reverse(this, \''+$(this).attr('id')+'\')" appelle la fonction reverse avec en paramètre la nouvelle image créée et l'attribut id de l'image d'origine
La fonction réaffiche l'image d'origine (celle avec un attribut id) et supprime l'image ajoutée.
C'est cette partie qui permet de faire des aller retour sans tout recharger.

Si une image doit servir plusieurs fois, à mon sens il serait plus logique et ergonomique de l'afficher plusieurs fois.

[Pompom]

J'y avais pensé aussi a l'ajouté plusieurs fois, mais le but du programme est que l'utilisateur puisse faire une sorte de Grafcet eux même, et donc qui sais combien de transition ils vont m’être par exemple.
Sinon merci pour tes explications, je prend note