# Draggable & percentage

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

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

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

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

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

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

• 2
##### 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.

##### 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?

##### Share on other sites

• Solution

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

• 2
##### Share on other sites

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

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