Déplacer des images au clic Js

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Déplacer des images au clic Js

Message par Pompom » 24 mars 2021, 08:49

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

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Déplacer des images au clic Js

Message par webmaster » 25 mars 2021, 14:03

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>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Déplacer des images au clic Js

Message par Pompom » 25 mars 2021, 14:10

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. :shock: :shock: :D

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. :D :D :D

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Déplacer des images au clic Js

Message par Pompom » 25 mars 2021, 14:21

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. :mrgreen:

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Déplacer des images au clic Js

Message par webmaster » 25 mars 2021, 15:12

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.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Déplacer des images au clic Js

Message par Pompom » 25 mars 2021, 16:08

:) 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 :P :D

Répondre