Search the Community

The next update to Draggable introduces some useful new properties: pointerX pointerY endX endY The "pointer" properties refer to the mouse (or touch) location from the last event (like event.pageX) associated with that Draggable instance. The "end" properties refer to where the element will land. Those get populated as soon as the user releases the mouse (or touch). Draggable also has the following properties (which aren't new): x y xMax xMin yMax yMin Here's the dilemma: technically there's an inconsistency with the way the new names are structured compared to the existing properties - "x" and "y" are at the end instead of the beginning ("endX" vs. "xMax"). Matching the current naming structure seems awkward ("xPointer" and "yPointer" don't seem nearly as intuitive as "pointerX" and "pointerY"). I don't like having inconsistencies, though. Should we change the max/min names so that the "x" and "y" are at the end? The only awkward one is "maxX" because there are two x's at the end. So it'd mean changing them to "maxX", "minX", "maxY", and "minY". Or we could leave the old/existing properties the same and live with the inconsistency. The nice thing about this is it wouldn't break any existing code that users have written. However, since Draggable is so new, this isn't as big of an issue - if we're going to make a change to the API, it's much better to do it now before more people start using it. What are your thoughts? We need to make this decision quickly, as the goal is to release the Draggable update by tomorrow. Your input is greatly appreciated. (by the way, the upcoming new features are mentioned in this thread: http://forums.greensock.com/topic/8056-draggable-invert-bounds-behavior/#entry31763)

Hello i'm working with Draggable and the ThrowPropsPlugin - they are fantastic! However I have a problem. How can I get the final x, y position of the dragged object? When dragEnd is outside the boundery, ThrowProps will move the object back inside the boundery (very nice!) but where does it stopp? I'm working on a kind of mouse-follower, where one object follows the draggable one.

I am using draggable on a div containing svg elements If I dont use draggable and scale the div via:- var i = $('#chart'); TweenLite.to(i, 2, {scale:4}); The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors. However if I enable draggable via:- var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); and then zoom the SVG element become fuzzy as though they were scaled pixels. This happens even if I disable draggable before scaling Any ideas why this might be? Thanks - Dean Update: Scale without Draggable uses -webkit-transform: matrix(... Scale with Draggable uses -webkit-transform: matrix3d(... using Safari and Chrome on Mac - not a problem on Firefox (not using webkit) Ah: Putting force3D:false as in: TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false}); Is their a reason for the problem with matrix3d and scale on webkit? solves the problem

Is it possible to use the Draggable util class with Canvas, specifically EaselJS? I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview Is the something wrong with the math on my Canvas version perhaps? Any tips would be appreciated.