Drag drop on multi transformed node

[jollibee]

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.

[Carl]

Thanks for the demo. In cases where you have transformed parents just set your transform values with GSAP and you should be in good shape

 

See the Pen YLyzGB?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

The post below explains why it is better to use GSAP than CSS in these cases

 

 

[jollibee]

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.

 

[GreenSock]

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? 

[PointC]

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. 

[jollibee]

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.

[jollibee]

<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.

[jollibee]

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.

 

[PointC]

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.

 

[jollibee]

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.

[GreenSock]

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? 

[jollibee]

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.