STIC Discussion:STIC I - exercice 5 (Zelda)
1 Drag and drop qui ne fonctionne pas --
Bonjour,
1) Cela fait un moment que j'essaie de rendre l'élément "dragabble", mais il reste fixe et je ne comprends pas où est mon erreur. J'ai vérifier les liens Jquery-ui et mon file.js. J'ai vérifier les classes et repris les mêmes dans mon file.js. J'ai comparé avec l'exercice 6 du dossier stick-1-jquery-ui-master et je ne comprends pas ce qui bloque.
Le but de l'application est de glisser le son sur la bonne image. Pour l'instant je n'ai testé qu'avec la grenouille.
J'ai téléversé mon application pour qu'elle soit accessible ici : http://tecfaetu.unige.ch/etu-maltt/zelda/latorre9/stic-1/ex5/app/
Merci d'avance pour vos conseils et votre aide.
Mon code html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sandra La Torre - STIC I - Exercice5</title>
<link href="assets/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet">
<link href="assets/css/css-template.css" rel="stylesheet">
</head>
<body>
<h1>Listen and drag the sound to the right picture.</h1>
<p>Ecoute chaque son et glisse-le sur l'image correspondante.
<br>Si le son ne correspond pas à l'image, il retourne à sa place. </p>
<div class="grid-sounds">
<div class="sound butterfly">1</div>
<div class="sound elephant">2</div>
<div class="sound dog">3</div>
<div class="sound pig">4</div>
<div class="sound mouse">5</div>
<div class="sound frog"> <audio controls><source src="assets/sons/frogsound.mp3" type="audio/mpeg"></audio></div>
<div class="sound cat">7</div>
<div class="sound rabbit">8</div>
<div class="clear"></div>
</div>
<br>
<div class="grid-container">
<div class="container butterfly-container"> <img src="assets/images/butterfly.svg" alt="papillon" width="200" height="200"></div>
<div class="container rabbit-container"> <img src="assets/images/rabbit.svg" alt="lapin" width="200" height="200"></div>
<div class="container cat-container"> <img src="assets/images/cat.svg" alt="chat" width="200" height="200"></div>
<div class="container dog-container"> <img src="assets/images/dog.svg" alt="chien" width="200" height="200"></div>
<div class="container elephant-container"> <img src="assets/images/elephant.svg" alt="éléphant" width="200" height="200"></div>
<div class="container frog-container"> <img src="assets/images/frog.svg" alt="grenouille" width="200" height="200"></div>
<div class="container mouse-container"> <img src="assets/images/mouse.svg" alt="souris" width="200" height="200"></div>
<div class="container pig-container"> <img src="assets/images/pig.svg" alt="cochon" width="200" height="200"></div>
</div>
<footer> Créé pour le cours STIC I, décembre 2019, S. La Torre. </footer>
<script src="assets/vendor/jquery-ui/external/jquery/jquery.js"></script>
<script src="assets/vendor/jquery-ui.min.js"></script>
<script src="assets/js/file.js"></script>
</body>
</html>
Mon code .js pour l'élément "frog"
$(".sound").draggable({
cursor: "move",
revert: "invalid"
});
$(".frog-container").droppable({
accept: ".frog"
});