draggable How to limit Draggable X or Y amount

[Yashi 4 Likes (Newbie)]

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.. 

[Sahil 2,541 Likes (Superhero)]

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

 

[Yashi 4 Likes (Newbie)]

@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..

 

 

[Yashi 4 Likes (Newbie)]

@Sahil check this example.. and try the dragging part.. its lock in to certain amount. http://www.refletcommunication.com/en

[OSUblake 9,990 Likes (Superhero)]

You want to limit the drag 200px every time? 

[Yashi 4 Likes (Newbie)]

yes. exactly @OSUblake

[Sahil 2,541 Likes (Superhero)]

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

[OSUblake 9,990 Likes (Superhero)]

Yeah, just update the bounds.

 

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

 

[Yashi 4 Likes (Newbie)]

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.

 

 

 

 

 

[Sahil 2,541 Likes (Superhero)]

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.

[Yashi-2 13 Likes (Newbie)]

Ok i'll give a try now. let you know.

[Sahil 2,541 Likes (Superhero)]

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

 

[Yashi-2 13 Likes (Newbie)]

@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',
    edgeResistance:0.65,
    cursor: '-webkit-grab',
    dragClickables: true,
    throwProps:true,
    allowContextMenu : true,
    trigger: '.mainBody-right',
    zIndexBoost:false,
    lockAxis:true,
    force3D:true,
    onDragStart: function(e) {
      TweenLite.set(this.pointerEvent.target,{cursor:"-webkit-grabbing"});
      doc.off('mousemove', moveCircle);
    },
    onDrag: function(e){
      this.applyBounds({minX: 300, minY: 0, maxX: -300, maxY: 0});
    },
    onDragEnd: function(){
      doc.on('mousemove', moveCircle);
      TweenLite.set(this.pointerEvent.target,{cursor:"-webkit-grab"});
      this.applyBounds('body');
    }
  });

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

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. 

 

Quick PSA for any devs coming across this.

 

YOU CAN'T DETECT A TOUCHSCREEN!!!

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

 

...

 

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

 

 

[OSUblake 9,990 Likes (Superhero)]

Some other demos that deal with mapping...

 

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

 

 

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

 

 

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

 

 

[OSUblake 9,990 Likes (Superhero)]

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;

 

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

 

[Yashi-2 13 Likes (Newbie)]

@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. 

[Yashi-2 13 Likes (Newbie)]

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;

 

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

 

 

 

 

This is a simple thing i already did this.