Comment rendre des éléments déplaçables par drag & drop dans Webflow ?
Apprenez à rendre des éléments déplaçables par glisser-déposer dans Webflow avec jQuery UI.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment rendre des éléments déplaçables par glisser-déposer dans Webflow avec jQuery UI.
Exemple
| Étape | Où | Action |
|---|---|---|
| 1 | Page Settings > Head | Charger jQuery UI depuis cdnjs |
| 2 | Webflow Designer | Ajouter la classe draggable-element |
| 3 | Footer code | Initialiser .draggable() |
1. Chargez jQuery UI dans le head
Dans Page Settings > Custom Code > Head, ajoutez :
2. Ajoutez la classe sur votre élément
Dans le Designer Webflow, ajoutez la classe draggable-element sur l'élément à rendre déplaçable.
3. Initialisez dans Footer code
$(function() {
$('.drag').draggable({
});
});Conclusion
Deux lignes de code pour un drag & drop natif et robuste. Voir aussi : rendre un élément déplaçable dans Webflow.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
