Search the Community
Showing results for tags 'ondragend'.
Found 4 results
-
First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!
-
I need to be able to get the position of the box or a way to know where the box moved and update the state. onDragEnd I can't pass the this.x for some reason, not sure if I'm missing anything. Here is the Demo: https://codesandbox.io/s/stoic-wood-zuyel?file=/src/Box.jsx
-
Hi I am trying to get the x and y end point after a drag event. But the values are negative and dragging to the top left does not return 0,0 as one would expect. The values I am getting seem to be relative to the starting position of the dragged element, rather than absolute from the bounds container. You can see in the example if you move the box to the left and up the endX and endY are negative values, but I want the x and y values the box's position within the container. Am I doing something wrong or do I need to read in the starting position and then offset it? Thanks
-
Hi gang, Insert standard gushy comments about how great Greensock is...(cos it really is THAT good) I'm hoping there's something I've overlooked or that there's a quick and easy fix for what I'm seeing.... In my site I've encountered an issue with very quickly dragging objects with the mouse (in my limited test I don't think it was as much an issue on touch devices) onDragEnd I'd like to sometimes tween the dragged item back to it's original position (dependent on certain conditions) which works fine on most tests. However I noticed than when very quickly dragging and releasing it would sometimes get "stuck" on the release of the mouse and not tween back to it's original position. Using Developer Tools I could see that when this happens a style such as: transform:matrix(1, 0, 0, 1, -297, 14) or sometimes (not sure why it's different at times?) translate3d(-297px, 14px, 0px) is still applied to the draggable even though I've set a tween of x and y back to 0 (using a Draggable setup of type:"x,y"). A minimal version of the issue can be seen on this Codepen: http://codepen.io/anon/pen/GlHLa in which all I'm trying to do onDragEnd is : TweenMax.set(e.target, {clearProps:"transform"}); but this seems to be ignored when dragging too quickly and I'm left with the translate/matrix still applied. Perhaps there's another draggable setting I need to use or another event like onRelease needs to be utlised? Any pointers would be most appreciated. Thanks all.
