changing parent div from ion-scroll with zoom

[bda2206]

Hi,

 

I have a draggable that I change its parent to be an ion-scroll which has zoom, so I can drag/zoom the board around and the draggable is stuck to it..

 

When I want to drag the draggable away from/around the ion-scroll I have to change the parent away from the ion-scroll, so that the ion-scroll does not follow the cursor.

 

If the ion-scroll has zoom applied, then the draggable does not track the cursor when I change the parent, it moves faster..

 is an example of the zoom issue, and the fix is to draggable.update().

 

The second issue is because I reparent the draggable, I need to put it back where it belongs on the screen. (tweenlite.set)

 

When I draggable.update() the tweenlite does not work, and the draggable is off the top of the screen. If I don't draggable.update() I can position the draggable ok.

 

           //changes the parent of the draggable

           document.getElementById(home_id)

                .appendChild(document.getElementById(draggable.vars.id));

            //get the location to put the draggable

            var pointx = draggable.pointerX;

            var pointy = draggable.pointerY;

            //document.getElementById(draggable.vars.id).style.position = "absolute";

            draggable.update(); 

            TweenLite.set("#draggable", {x:pointx, y:pointy, z:1000});

 

the draggable after the update and tween

 

05-01 22:25:16.943: I/chromium(2667): [iNFO:CONSOLE(99)] "draggable after{"_listeners":{"drag":[{"pr":0}],"release":[{"pr":0}]},"_eventTarget":{"_gsTweenID":"t4","_gsTransform":{"perspective":0,"force3D":true,"svg":false,"skewType":"compensated","x":-4,"y":-311},"_gsDragID":"d4"},"vars":{"type":"x,y","id":"game_lettertile_4","element":{},"zIndexBoost":true,"location":"dragging"},"target":{"_gsTweenID":"t4","_gsTransform":{"perspective":0,"force3D":true,"svg":false,"skewType":"compensated","x":-4,"y":-311},"_gsDragID":"d4"},"rotation":0,"y":-311,"x":-4,"dragResistance":0,"edgeResistance":1,"autoScroll":0,"lockedAxis":null,"allowEventDefault":false,"pointerEvent":{},"pointerY":164.2830047607422,"pointerX":198.17100524902344,"isThrowing":false,"tween":null,"isPressed":true,"endY":-311,"endX":-4,"isDragging":true}", source: file:///android_asset/www/scripts/gamescreen/gamescreen.controller.js (99)

 

I've tried switching lines around and repeating them.. 

Any insights appreciated.

See the Pen rpJHh?editors=011 by anon (@anon) on CodePen

[GreenSock]

Is this any better? 

http://codepen.io/anon/pen/wWwyPe?editors=011

There was an enhancement made to the new Draggable in GSAP 1.18.5 that makes this type of thing easier (note the second parameter of the update() call being true):