Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jollibee

Drag drop on multi transformed node

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

:)

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×