(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Create any Element Draggable with GSAP
With this GSAP code, you can simply make anything draggable and also define a bounding box so that the element cannot be dragged outside it.
- In below code, we add transition:none as Elementor adds transition:all to all elements by default and that messes up with GSAP code.
- In Draggable.create(‘.ADD-CLASS-NAME-HERE‘), we add the class name of the element that should be draggable.
- in bounds: ‘.ADD-BOUNDING-CLASS-NAME‘, we add the class of the container that will act as a bounding box for the draggable container. This way the draggable element cannot be dragged outside the bounding container.
- We also add script src to reference and run GSAP library and its draggable library to our website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Draggable.min.js"></script>
<style>
.dm-drag-element {
transition: none !important;
}
</style>
<script>
Draggable.create(".dm-drag-element", {
bounds: ".dm-drag-container"
});
</script>
