Jump to content
Search Community

Draggable & percentage

Fusion2222 test
Moderator Tag

Go to solution Solved by Diaco,

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

 

Just wondering, if It is possible something like:

Draggable.create("#myObject", {type:"xPercent,yPercent"});

or

Draggable.create("#myObject", {type:"leftPercent, topPercent"});

Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?

See the Pen ZYpXYP by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Hi Fusion2222  :)

 

you can get Draggable x/y percentage easily with this piece of code :
var w = $("#container").width();
var h = $("#container").height();

Draggable.create(".knob",{
type:"x,y",
bounds: {minX:0,minY:0,maxX:w,maxY:h},
onDrag: function(){calcPercent(this.x,this.y)}
});

function calcPercent(x,y) {
Xpercent = Math.round(x / w * 100);
Ypercent = Math.round(y / h * 100);
console.log(Xpercent,Ypercent);
};
pls check this out : 
Link to comment
Share on other sites

Hi Diaco,

 

I tried to figure this out exactly like you did, and then i tried to assign these coordinates back to tween object.

 

Solution would be to convert left and top coordinates to % each time (using onDragEnd). But this is still not good, because on drag start, "left" and "top" are trasnformed in px like this:

 

50% -> 50px

35% -> 35px

 

Please take a look on #dragger object in my codepen, and watch out ugly behaviour. I wonder if is there any elegant solution for this.

 

codepen:

See the Pen KwgXWJ by anon (@anon) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

Hi Fusion,
 
I really like your idea about the percent types! Using percents would eliminate the need to call a resize function.

 

I ran into the same problem you described above while trying to create a responsive range slider. No matter what I did, all my percentage values became pixel values whenever I clicked a draggable element. I'm not sure if this is by design, a bug, or me just doing it wrong. :unsure:

 

In the end, I was able to figure out a workaround. Instead of using top/left, I used marginTop/marginLeft and gave them a negative x/y offset. If you are trying to make it responsive, you might need to offset your draggable element(s) relative to your margin percentages.

onDragEnd: function(){
  TweenMax.set("#dragger",{      
    marginLeft: this.endX / 4 + "%",
    marginTop:  this.endY / 4 + "%",
    x: -this.endX,
    y: -this.endY
  });
} 

CodePen URL: 

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

Link to comment
Share on other sites

Thanks Diaco!

 

Your example works well. I didn't even try it like that because I want to avoid having to use a window resize event. 

 

In most cases it's easy to respond to size changes because the user usually initiates them. But I was trying to cover those edge cases where I might not be able to capture an element resizing. Apparently only IE allows you add to resize listeners to elements other than the window.

 

What I did above has worked so far. The only problem I've noticed is that sometimes when an element resizes, the maxX/Y might be a little off on the first drag, even after updating the draggable.

Link to comment
Share on other sites

Wow. I didn't realize you could recreate the same draggable element on the fly like that. The word create made it seem expensive, so I didn't even think about that. I'm going to test that out for my maxX/Y issue. Have you noticed any kind of performance hit when doing that?

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.
×
×
  • Create New...