draggable Draggable items with bounds

[BernasN135]

Hi, I've been creating my portfolio on Webflow. On my "About me" page I want to have a "tool stack" and "expertises" section where I put related words, but I would like all these words to be draggable but to have limits (so they can't be dragged across the entire page), like In the image below I already have visually defined limits, but as I'm new to the code I don't know how to create these limits. Below is also the code I used to drag the "tags". Thanks already!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
      $(function() {
        $(".tool_stack_items").draggable({
        });
      });
    </script>

 

[Rodrigo]

Hi @BernasN135 and welcome to the GSAP  Forums!

 

In Draggable you can define bounds using a selector, a DOM element or specific values. From the Draggable docs:

https://gsap.com/docs/v3/Plugins/Draggable/#bounds

 

Here is a simple demo of how you can set it up:

See the Pen QWRqQeJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!