How to make elements draggable with drag and drop in Webflow

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to make elements draggable with drag and drop in Webflow using jQuery UI.

Example

1. Load jQuery UI in the head

In Page Settings > Custom Code > Head, add:

2. Add the class to your element

In the Webflow Designer, add the draggable-element class to the element you want to make draggable.

3. Initialize it in Footer code

$(function() {
  $('.drag').draggable({
  });
});

Conclusion

Two lines of code for native, robust drag and drop. See also: make an element draggable in Webflow.