[Drag drop on multi transformed node]

4 hours ago, GreenSock said:

Finally figured it out! I applied a fix in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

 

Great job. I will update the draggable to latest when new release coming.

[Drag drop on multi transformed node]

10 hours ago, PointC said:

That is a bit strange.

 

I'm wondering if you could remove the SVG as a child of your transformed divs and position it absolutely where it needs to be by using getBoundingClientRect() to find out where the parent is located. With that info you could position and rotate the actual SVG. I don't know if that would work in your actual project, but it's the first thing that comes to mind. Jack may have additional info later.

 

Happy tweening.

 

 

Sure, that's what I'm trying to do: rewrite the html structure, and position/tween each element.  Just wondering if there is a better and elegant solution for such case.

 

Update: Drag drop works on Android/Mac chrome after I merge transform into one node.

[Drag drop on multi transformed node]

14 hours ago, GreenSock said:

I'll need some time to look into this. Do you have a real-world project that you need this for or was it hypothetical? 

 

It's a real-world project. 

 

I made more demo on this.

 

Demo1 with drag drop problem on chrome:

 

See the Pen XqmpQB by jollibee (@jollibee) on CodePen

 

Demo2, works on chrome (remove the outer2, position: absolute):

 

See the Pen KRdWQB by jollibee (@jollibee) on CodePen

 

[Drag drop on multi transformed node]

<div id="outer2" style="transform, rotate, and scale"><svg>...</svg></div>
<div id="outer3" style="transform and scale"></div>
<div id="outer4" style="transform and scale"></div>

 

I will try this approach firstly. Remove outer1, separate the sub divs and set style with TweenMax.

[Drag drop on multi transformed node]

3 hours ago, PointC said:

I'm rather curious myself as to the real-world need here. Personally,  I would just transform the SVG itself. I'd think a multi-level nest of divs that each have transforms would just be a recipe for trouble no matter what you're doing, but I like things simple so I don't confuse myself. 

 

It is a real world project. I got the problem in my project, and then I'm trying to simplify  the problem use the codepen demo.

 

https://stackoverflow.com/questions/27146742/foundation-force-landscape-mode-on-mobile-devices, The rotation feature is something like this. I force a landscape mode when loading a page into a mobile app (the app is portrait itself and screen is locked by OS). There are some animations and drag drops inside the page. Everything works great except drag drop on Android Chrome (Mac Chrome has the problem too). Safari works in my case.

 

The 'outer1' in the project is like the container, similar to document.body.

 

The 'outer2' is another div in my project. The svg is in the outer2 div, and there are some drag drop elements inside the svg.

 

There are also, 'outer3', 'outer4', 'outer5' inside 'outer1', that's why I cannot scale firstly and then rotate.

 

It will be great if there is a solution for this. Otherwise, I have to deal with another approach for my case.

[Drag drop on multi transformed node]

It works for transform firstly, and then rotate. In your case.

 

But I got problem when rotate outer1, then move outer2.

 

Check this:

 

See the Pen YLyXPx by jollibee (@jollibee) on CodePen

 

[Drag drop on multi transformed node]

Drag drop does not work if the svg node under two transformed div:

 

<div style="transform: rotate(90deg)">
    <div style="transform: translate(20%, -10%) scale(1.2)">
      <svg>...</svg>
    </div>
</div>

 

Check the codepen. The object will go up if drag it to the bottom.

 

Test on chrome Version 65.0.3325.181 (Official Build) (64-bit) for macOS 10.13.4.

See the Pen BxNeBP by jollibee (@jollibee) on CodePen

[Drag along an svg path]

On 1/10/2018 at 2:43 PM, OSUblake said:

 

Actually, this might be easier. I just modified the closestPoint function from this d3 demo.

https://bl.ocks.org/mbostock/8027637

 

 

See the Pen YYemRa by osublake (@osublake) on CodePen

 

 

 

 

Great job. I will start from this demo.

[Drag along an svg path]

I will take a look at the links.

 

Also, I'm think about split the path into multi line for complicated shape.

[Drag along an svg path]

The circle move along the path with animation in this example.

 

But how to do that with draggable plugin,  drag the circle along the path.

See the Pen xpYbgg by jollibee (@jollibee) on CodePen

[How to get delta value change of current attibute?]

Works for me, thank you.

[How to get delta value change of current attibute?]

TweenMax.to("#redBox", 1, {left:500, ease:Linear.easeNone, onUpdate: updateFunc, onUpdateParams:['{self}']})

function updateFunc(tween){
  console.log(tween);
  // How to get delta value of left?
}

 

How to get the value different on 'left' attribute in onUpdate function? (current.left - last.left)

 

Thank you.

See the Pen brPJOq by devon (@devon) on CodePen

[Rotation around center in Safari is different from Chrome]

It works on Safari. So we can write some code to analyze the transform on group and set use TweenMax.

 

Thank you.

[Rotation around center in Safari is different from Chrome]

I can help you to test safari. Let me know if there is anything I can do. Thank you.

[Rotation around center in Safari is different from Chrome]

There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'.

 

It works great in Chrome, but the position of  'p1-1_abc_1' jumped in safari when the timeline start.

 

Safari: Version 10.1.1 (12603.2.4)

Chrome: Version 58.0.3029.110 (64-bit)

 

 

See the Pen dRpOXW by devon (@devon) on CodePen