Draggable edgeRessistance and out of bounds

[cemycc]

Hello,

 

2-3 weeks ago when I had tested the draggable was working like this: I set up bounds to a div and edgeResistance to 0.9. When I was dragging the element outside the bounds it was possible to keep is position outside but with 'slow motion' because of edgeResistance. 

Now, I have updated the library and when I drag outside bounds It gets back to the bounds. 

 

I was looking on documentation and I think that the new method applyBounds() is called automatically on drag end. 

 

[GreenSock]

Did you mean that it gets applied onDragStart? I've attached a preview of the upcoming 1.11.0 release of GSAP which includes a bunch of updates to Draggable. I believe it fixes the issue you mentioned. Please give it a shot and let us know if it works well for you. 

 

Notable improvements:

1. There's a new "liveSnap" feature that you can turn on by setting liveSnap:true - that causes any snapping rules to apply during the drag (without liveSnap:true, snapping only applies to the END value(s)). This can be useful if, for example, you want to drag a box that always must fit in a grid or you want to rotate something in 10-degree increments (or whatever). 
2. New "rotation", "endRotation", "maxRotation", and "minRotation" properties (which are identical to "x", "endX", "maxX" and "minX" but named more intuitively). It shouldn't break existing code because x/endX/maxX/minX are still populated in the same way. It just seemed like code would be more readable this way when the Draggable type is "rotation". 
3. You can define the bounds for rotation using an object with "max" and "min" properties. It will also recognize "maxRotation" and "minRotation" if you prefer. Like bounds:{min:-90, max:90} or bounds:{maxRotation:90, minRotation:-90}.
4. There's a new "dragResistance" property (a value between 0 and 1) that controls how much resistance there is during any dragging (not just outside the bounds which is what edgeResistance affects). 
5. "resistance" has been renamed "throwResistance" so that it's more descriptive (now that we have edgeResistance and dragResistance, it seemed like plain "resistance" was just too vague). 
6. There's a new "pointerEvent" property that records the last mouse (or touch) event that affected the Draggable instance. That way, you can access that event's data like target, currentTarget, pageX, pageY, etc. By default, that event is also passed as a parameter to callbacks like onDragStart, onDrag, and onDragEnd.
7. Added startDrag() and stopDrag() methods so that you can manually trigger those, but please note that you MUST pass a mouse (or touch) event as a parameter to those because it's imperative for them to be able to do things like get the pageX and pageY for the mouse/touch position, and preventDefault(), etc. 
8. A few minor bug fixes.

Enjoy! And again, please let us know if you stumble across anything odd. 

GSAP_1.11.0_rc3.zip

[cemycc]

Thank you for your answer.

 

I still can't get the same effect like before. What I want is that when the draggable element is dragging outside the bounds he will keep his position outside. Right now when I release the mouse he gets back in his bounds. On older version the element was staying outside the bounds but he was dragging outside the edgeRessistance property was used.

 

Now with liveSnap: true there is no edgeRessistance but still when I release the mouse the element goes back to the bounds.

[cemycc]

Update for other problem of mine described here http://forums.greensock.com/topic/8248-drag-new-element-from-the-div/#entry31916 . 

 

Now with the new functions startDrag and stopDrag I can set the position of the draggable center relative to the mouse position. 

On the mousedown event for the div i want to clone, I create the new clone and the draggable object then I just call startDrag. 

 

Thanks for this again.

[GreenSock]

Are you saying things are all resolved now? I was a little confused about the bounds behavior you described regarding the earlier version - did you expect the bounds to NOT get applied when the mouse/touch is released outside the bounds? It seems to me like the bounds should be enforced. The edgeResistance is just for while dragging is happening outside the bounds, but then on release it should go back to within the bounds. 

 

So is everything okay now? 

[cemycc]

I understand now the behavior of edgeResistance.

Thank you.