Closed SterlingButters closed 5 years ago
That would be interesting. I think that you can probably use the onDrag
event listener and update dash_draggable
's position prop using the position
prop from Draggable
.
Check out the react-draggable docs here: https://www.npmjs.com/package/react-draggable
Feel free to open a PR if you feel this would be a good addition!
@xhlulu Hoping you might take a look at my branch JSON Cycle Error I feel like everything is set up right. I'm brand new to react so I've never seen this error before and I don't know how to resolve it.
The goal is to get DeltaX
and DeltaY
to use these for the comparison
UPDATE:
Interesting... I just realized that I probably want to use the onStop
property instead of the onDrag
but I really get an odd result - the element is "stuck" to the mouse... And the JSON error is still there too -.- what is going on...
I believe that the node
property of data
here is not JSON serializable... which means it can't be passed to setProps. Could you try to just pass everything except node
, and construct a new object that is passed to setProps? E.g.
this.props.setProps({
lastX: data.lastX,
lastY: data.lastY,
...
})
Great suggestion! Let me try that out! Still new but taking notes as I go!
UPDATE: IT WORKS! Awesome! I'll fix it up nice and submit a PR
Just a side question: If node
is not JSON serializable, how can children
be of PropType node
Also, interestingly, deltaX
and deltaY
are always returning 0. Not sure why - this is in the console.log
before setting them as props so idk
UPDATE: Think I got it
@xhlulu So sorry, I meant to merge that last PR to my own fork first - I wanted you to review before I merged - good news is it works haha I'll just delete my fork so I don't do that again
This if fine! Feel free to close this issue if there isn't more to update :)
It appears that
callback
's to theposition
property only allow you to set the property with position data, not retrieve position data. This could be very useful in the following example:You can see that it would be useful here to create a callback that stores the last 2 positions and makes a comparison and if
position_before
!=position_after
then the button logic is ignored.Also I plan to create a callback between a
Store
component and thePosition
property of this component so that even if the user exits the app, their layout remains the same.