cesco Posted November 23, 2021 Share Posted November 23, 2021 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 More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 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 More sharing options...
cesco Posted November 23, 2021 Author Share Posted November 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 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 More sharing options...
OSUblake Posted November 23, 2021 Share Posted November 23, 2021 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 More sharing options...
cesco Posted November 23, 2021 Author Share Posted November 23, 2021 sorry @Cassie I think this is better See the Pen bGrgELJ by cescocesco (@cescocesco) on CodePen Link to comment Share on other sites More sharing options...
cesco Posted November 23, 2021 Author Share Posted November 23, 2021 @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 More sharing options...
OSUblake Posted November 23, 2021 Share Posted November 23, 2021 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". 3 Link to comment Share on other sites More sharing options...
cesco Posted November 24, 2021 Author Share Posted November 24, 2021 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 More sharing options...
OSUblake Posted November 24, 2021 Share Posted November 24, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now