Gsap draggable plug-in issue

[Makavel1]

Dear Gsap community and forum ,

 

I am using gsap draggable plugin for one of my projects and experiencing a problem after dragging the item. In the example I’m providing I reproduced the issue. Im using the vuetify framework. Once I create boxes with a for loop that include an image, the overlay and resize effect work as desired onclick . But when I drag one of the created boxes the resize effect doesn’t work anymore. I’m trying to understand why this happens. Inspecting the item after and before dragging it didn’t show the problem. 
 

Thank you in advance !

See the Pen jOBxVyN by makavel123 (@makavel123) on CodePen

[OSUblake]

Hi Makavel1!

 

I think you just might need to control the zIndex. Try adding zIndexBoost: false to your draggable.

[GreenSock]

I'm not entirely sure I understand your question, but the issue you're running into may simply have to do with the fact that you've got the child element set to position: fixed but if an ancestor element has ANY transform applied (which is what Draggable is applying), that will make position: fixed relative to that container element, NOT the viewport. It has nothing to do with GSAP/Draggable - it's how CSS works. So as soon as you start dragging and the transform is applied, the image is no longer filling 100% of the viewport, it's filling 100% of the containing element (the one that's draggable). 

 

Perhaps I misunderstood your question, though. 

[Makavel1]

Thank you for the clarification and quick reply  @GreenSock and @OSUblake. I really appreciate your help and yes this was exactly my question and issue @GreenSock. Any suggestion to resolve my css problem. Somehow the hint @OSUblake gave me with zIndexBoost helps to some extend when I give the image a higher z-index than the overlay and press the overlay button when the page is loaded. After that I can drag any box and the position stays fixed. But if I drag the item without pressing the overlay button first the image is not displayed anymore.

Thank you and congratulations for this awesome GSAP!

[GreenSock]

I don't know of a way to magically make the CSS work differently and get around the position: fixed + transforms thing, but what if you just changed from type: "x,y" to type: type:"left,top"? In general I prefer x,y because transforms perform better but if you're mostly focused on getting around a CSS limitation, perhaps that'd work for you. Or rework your CSS/HTML