Vidéo explicative
1. Ajoutez une class aux éléments que vous voulez rendre déplaçable
2. Ajoutez ce script dans le </body> dans les paramètres de votre page
< script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
< script>
$(function() {
$(".yourclass").draggable({
});
});
</script>
Pensez à bien mettre votre class dans le script à la place de "yourclass"
3. Publiez votre site et testez le résultat
4. Bonus : ajouter une animation au hover pour une meilleure expérience
- Sélectionnez l'élément sur lequel vous voulez ajouter l'interaction dans la vue de conception.
- Dans le panneau d'interaction, cliquez sur "Ajouter une interaction" pour créer une nouvelle interaction.
- Sélectionnez "Hover" dans la liste des déclencheurs d'interaction.
- Dans la section "Actions", cliquez sur "Ajouter une action" pour créer une nouvelle action.
- Sélectionnez "Scale" dans la liste des actions disponibles.
- Entrez "1.05" dans le champ de saisie de la valeur d'agrandissement pour augmenter la taille de l'élément de 5%.
- Cliquez sur "Ajouter une action" dans la section Hover out et dupliquer votre action précédente
- Rétablissez les paramètres par défaut (scale = 1)
- Enregistrez les modifications en cliquant sur "Appliquer"