Jump to content
GreenSock

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

Draggable & percentage

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 : 

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

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

Hi guys :)

 

i have updated my codepen , maybe that give you a clue :

 

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

  • Like 2
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

Hi OSUblake again :)

 

I've changed a bit my codepen , maxX/Y issue solved and that works fine now  ;

 

pls check this out  :

 

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

  • Like 2
Link to comment
Share on other sites

Thanks Diaco, I would call that far beyond being awesome. Very elegant solution, thanks again!

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