Ajouter

Lorem ipsum

Lorem ipsum

Design

3 min

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

Déplace-moi !
Glisse l'élément dans la zone
ÉtapeAction
1Page Settings > HeadCharger jQuery UI depuis cdnjs
2Webflow DesignerAjouter la classe draggable-element
3Footer codeInitialiser .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({
});
});

bon à savoir

La librairie est lourde (~250 Ko) : chargez-la uniquement sur les pages où vous utilisez .draggable(), via les Page Settings de chaque page concernée.

Conclusion

Deux lignes de code pour un drag & drop natif et robuste. Voir aussi : rendre un élément déplaçable dans Webflow.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...