Jump to content
GreenSock

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

Draggable translate3d set

Recommended Posts

Hi

 

when i drag an object , it sets own traslate3d value x,y,z. I set a function to translate it to left,top when dragend.

 

Example:

 

style="left:0px;top:0px;translate3d(10px,10px,0px)"

 

become

 

style="left:10px;top:10px"

 

It works but when i click again on same object translate3d settings reappear. I try to kill or update but nothing change. Is there a possibiliy to completely reset draggable on object?

 

Thanks

 

 

 

Link to comment
Share on other sites

Hi there @cesco,

 

I'm a little at a loss here without a minimal demo I'm afraid. Could you pop one together on codepen. It doesn't have to be styled, just some divs will do.

Maybe you're looking for...

 

update( applyBounds:Boolean, sticky:Boolean ) : Draggable

Updates the Draggable's x/y properties to reflect the target element's current position.

 

 

Link to comment
Share on other sites

thanks @Cassie

 

Here a test:

See the Pen bGrgELJ by cescocesco (@cescocesco) on CodePen

 

If you pan to top yellow area, you can see red circles. If you select a group of this and drag it by the one with red border, after it select another group and drag it, after select this 2 groups and drag it, you can see the problem.

 

Sorry but code is a little bit confusing because i test some solution.

Seems kill or update don't work.

  • Like 1
Link to comment
Share on other sites

Hi again @cesco

 

I'm afraid we don't have the capacity to go through 2000 lines of code in these forums. It would take a really long time to work through and figure out.

Could you simplify this down to show just one div and the GSAP code related to your question? No need to include all the elements and the zooming/panning behaviour.

Thanks so much!

Link to comment
Share on other sites

2 hours ago, cesco said:

when i drag an object , it sets own traslate3d value x,y,z. I set a function to translate it to left,top when dragend.

 

Example:

 

style="left:0px;top:0px;translate3d(10px,10px,0px)"

 

become

 

style="left:10px;top:10px"

 

You would do inverse in onPress. I do something similar in this old pen. Notice the calls made by onPress and onRelease.

 

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

 

Link to comment
Share on other sites

@OSUblake Hi, thanks for your answer but i already make it. The problem is that when i re-click to same div to drag it, translate3d start to previous value when i start to drag. Seems like memory effect, also if i kill or update it.

Link to comment
Share on other sites

You shouldn't have to kill anything, and your press callback isn't setting anything so of course nothing will happen. I also noticed that you were parsing transforms, but you can easily those values using gsap.getProperty().

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

If you don't want transforms, then set type: "left,top" on your Draggable.

 

Quote
String - Indicates the type of dragging (the properties that the dragging should affect). Any of the following work: ["x,y" (basically the translateX and translateY of transform) | "left,top" | "rotation" |"x" | "y" | "top" | "left"]. The default is "x,y".

 

 

  • Like 3
Link to comment
Share on other sites

Thanks @OSUblake

I was using onpressInit to convert translate3d to left,top, but when start drag old translate3d coord reappeard. 
But with type: "left,top" always works fine, i had misunderstand the meaning of type.

 

Thanks to all.

Link to comment
Share on other sites

You weren't setting anything in the press callback. It should look something like this.

 

drag = Draggable.create($first, {
          bounds: "#area",
          onRelease: function (e) {
                        
            gsap.set(this.target, {
              left: this.x,
              top: this.y,
              x: 0,
              y: 0
            });                     
          },
          onPress: function (e) {
                
            let props = gsap.getProperty(this.target)
            
            gsap.set(this.target, {
              x: props("left"),
              y: props("top"),
              left: 0,
              top: 0
            });
            
            this.update();   
          },
          liveSnap: true,
          snap: {
            x: function (endValue) {
              return Math.round(endValue / gridWidth) * gridWidth;
            },
            y: function (endValue) {
              return Math.round(endValue / gridHeight) * gridHeight;
            }
          }
        });

 

Link to comment
Share on other sites

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