Make an element draggable on your website

Explainer video

The Gemeos Webflow agency provides a video to show you how to do it in under 5 minutes.

1. Add a class to the elements you want to make draggable

2. Add this script in the </body> section in your page settings

 < script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
   

 < script>
     $(function() {
        $(".yourclass").draggable({
      });
    });

Make sure to replace "yourclass" in the script with your own class

3. Publish your site and test the result

4. Bonus: add a hover animation for a better experience

1. Select the element you want to add the interaction to in the design view.
2. In the Interactions panel, click "Add an interaction" to create a new interaction.
3. Select "Hover" from the interaction trigger list.
4. In the "Actions" section, click "Add an action" to create a new action.
5. Select "Scale" from the list of available actions.
6. Enter "1.05" in the scale value input to increase the element size by 5%.
7. Click "Add an action" in the Hover out section and duplicate your previous action
8. Reset the default settings (scale = 1)
9. Save the changes by clicking "Apply"