Make an element draggable on your website

Explanatory video

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

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

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

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

Remember to put your class in the script instead of “yourclass”

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 interaction to in the design view.
2. In the interaction panel, click “Add Interaction” to create a new interaction.
3. Select “Hover” from the list of interaction triggers.
4. In the “Actions” section, click “Add Action” to create a new action.
5. Select “Scale” from the list of available actions.
6. Enter “1.05" in the enlargement value input field to increase the size of the item by 5%.
7. Click “Add Action” in the Hover Out section and duplicate your previous action
8. Return to the default settings (scale = 1)
9. Save the changes by clicking “Apply”