Jump to content
Search Community

Drag drop on multi transformed node

jollibee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...