Déplacer des images au clic Js
Posté : 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
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