Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to limit Draggable X or Y amount

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi this is related to another question i'm currently solving. and i found a solution. its all inside the draggable plugin if i can get a perfect answer for this question. i can update that post and share my solution. my question is  how to limit draggable x or y value.


eg: if i click and drag, i want to drag only 200px left or 200px top. depend on my draggable type.


so how to get this thing done.. 

Link to comment
Share on other sites

You can set bounds by passing absolute values to bounds property while creating Draggable.


Draggable.create(target, {
  bounds: {minX: 0, minY: 0, maxX: 200, maxY: 200}  


You can change bounds by using applyBounds method and passing new bounding values.


See the Pen xPGdJK by Sahil89 (@Sahil89) on CodePen


You can instead use container as bounding object as well and element will remain within parent boundaries. You can also use applyBounds on resize so any element that goes out of bounding box will be positioned back inside. If you comment out resize event and resize the codepen, you will see the target stays out of container.


See the Pen jaPmep by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

@Sahil thank for your feedback.. this thing i know.. what i'm expect is different. ok let me explain


if i set my bound to window. and start dragging from the very beginning to the end its start dragging freely even 60% of the page is covered when i start from left to right.. but i want  to drag 200px. from left to right and lock that amount...  i hope you can understand what i'm trying to say..



Link to comment
Share on other sites

You want to limit the drag 200px every time? 

Link to comment
Share on other sites

Same idea, just use apply bounds depending on which direction you are.

  • Like 1
Link to comment
Share on other sites

hi both sorry to bother u again.. you both guys give me a solid understand about bounding. but this is something little different.. please find the attachment and check those red arrows and highlight. inside the highlighted circle when user click and drag its only update to 242px only on both direction and the background drag also limited. you can experience it and i saw the code, its little bit jumbled. but i can tell, there is a movement limit involve in this. and i'm mentioning about these limits not bounding limits. i hope you guys can understand what i'm trying to tell you.







Link to comment
Share on other sites

Well, you don't have to worry about how they have done it. You can achieve that by using a container, with width of 250 pixels maybe. Let the container follow your mouse like in previous thread, when you click, update your draggable and it's bounding container. Depending on direction set it's position. That's easiest way you can achieve it in my opinion. You can work on rest of the details pretty easily once you get this core functionality working.

Link to comment
Share on other sites

Here is working demo, right now I am using window width to determine direction. So check in 50% left or right.


In actual implementation you will do many things differently but this should give you idea. Notice how I am using startDrag to trigger drag after setting position of the container, rest should be easy.



See the Pen gXpXvK by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

@Sahil @OSUblake thanks for the update. I was able to use your first example and I extract that rebinding bounds part and manage it to achieve what I want. thank you both for guiding me. and this is related to my other question. now that one also solved. this is my test example.


 var introDrag = new Draggable(".dl-main-container", {
    type: "x",
    bounds: 'body',
    cursor: '-webkit-grab',
    dragClickables: true,
    allowContextMenu : true,
    trigger: '.mainBody-right',
    onDragStart: function(e) {
      doc.off('mousemove', moveCircle);
    onDrag: function(e){
      this.applyBounds({minX: 300, minY: 0, maxX: -300, maxY: 0});
    onDragEnd: function(){
      doc.on('mousemove', moveCircle);





Link to comment
Share on other sites

Hey @Yashi-2


That Reflect site you linked to didn't work correctly on my computer, so I had no idea what you were talking about. It was detecting my touch monitors, and assumed I was using touch, so I wasn't able to see that slider with my mouse. So annoying coming across sites like that. :angry:


Quick PSA for any devs coming across this.







Once I figured that out, your question started making sense. All you need to do is some mapping. Convert a value in one range to a value in another range. 


Check this out. I have a dragRatio value, which I multiply by the screen width. That's going to be the total amount of mouse/drag movement needed to make the slider move from 0 to 100%.


When dragging, I divide the amount of movement by that value, giving me a ratio. I then multiply the width of the slider by that ratio, giving me the current value of the slider.


For you!


See the Pen RjWKZZ by osublake (@osublake) on CodePen



  • Like 4
Link to comment
Share on other sites

Some other demos that deal with mapping...






See the Pen BLOoOP?editors=0010 by osublake (@osublake) on CodePen



  • Like 4
Link to comment
Share on other sites

@OSUblake Thank you very much. hahaha you guys are awesome.. but I manage it to recreate it.. but it's a little bit different. but I'll go through your code now and try to understand what you did and see if I missed something then I'll extract that part and apply to my code. once again thank you for this details example and codepen demo. 

  • Like 1
Link to comment
Share on other sites

10 minutes ago, OSUblake said:

And for smooth animations between a moving target, like a mouse, here's a really simple formula.


currentX += (mouseX - currentX) * someRatio;
currentY += (mouseY - currentY) * someRatio;






This is a simple thing i already did this.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.