Draggable & percentage

[Fusion2222]

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.

[Diaco]

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.

[Fusion2222]

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.

[OSUblake]

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.

[Diaco]

Hi guys

 

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

 

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

[OSUblake]

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.

[OSUblake]

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?

[Diaco]

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.

[Fusion2222]

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