I am using React DnD to handle dragging and dropping in a React app. I am using the touch backend. In this implementation, I am using a custom drag preview. While dragging, I hide the element that is "being dragged" by animating its max-height to 0. The custom drag preview shows as the user drags. If the user drops the element in an area that is not allowed, the item "being dragged" animates back to it's original height. This is good.
When the item is dropped, I send a redux action that reorders the list of items and puts the previously dragged element into its new location.
However, there is a moment where the dragged item flashes in its current location before the DOM updates and animates the item in its new location.
The max height animations are controlled by CSS classes that are added and removed when isDragging is true.
I have scoured the React DnD docs and examples (which are generally very thorough) and looked at some other open-source projects that have used React DnD, but cannot seem to locate the solution. I'm assuming I am missing something simple like a prop that I can pass. Essentially, I would like isDragging to stay true until the drop action is complete or be able to update a prop in either the endDrag method on the draggable target or the drop function on the droppable target.
I could use vanilla javascript to update the classList inside the endDrag method, but would prefer to use React tools if possible.
Has anyone encountered this issue?
I was able to get around this problem by fixing a known issue with Touch events stopping when a DOM node is unmounted in React.
https://github.com/yahoo/react-dnd-touch-backend/issues/31
In this solution, you create a copy of the DOM node that has the touch event attached to it so that it remains even if React unmounts the component as elements are added and removed during dragging.
Related
I'm working with React Force Graph (2D - https://github.com/vasturiano/react-force-graph) and trying to display custom tooltip on node hover.
This custom Tooltip (dummy component) would display data that's not returned by node - I'd like to add some details to the tooltip, and those are not stored in node data that's returned for example by onNodeHover).
I've seen that I could use nodeLabel which displays simple text label... but it accepts only strings and some simple string interpolations. Unfortunately I can't pass a component as params.
Does anyone know what would be a good approach to this? How this could be handled? Extra points for working examples :D
So here's the answer:
nodeLabel doesn't accept React Node but can easily accept string. So workaround for that problem is just passing the whole stringified html code to nodeLabel and RFG will handle that! This is the best solution I believe (althou native RFG tooltip doesn't support left/right - top/bottom switching in case tooltip would be cut by the edge of screen, but thats minor problem).
other solution that I wouldn't recommend would be to create useCursorPosition and whenever onNodeHover returns something else than null we can set state of displayNode to true (and display it conditionally based on this state) in positions returned by useCursorPosition. This solution is flaky thou, because sometimes onNodeHover doesn't return null I user scrolls fast outside the canvas boundaries (hence the tooltip stays displayed forever). In this solution it's also recommended to use requestAnimationFrame to limit the listener on cursor position.
I have React component which has an input element that is a child property of a GridItem component from https://github.com/STRML/react-grid-layout/blob/master/lib/GridItem.jsx
When I click into the input element for some reason the insertion point is not showing and I can't make any edits. I think the click is propagating through to the GridItem. I've tried to stop propagation but the issue remains.
Currently doing this
e.target.focus()
alert('Hello')
which works, the insertion point is correct and I can do edits,
whereas
e.target.focus()
fails, the insertion point is not shown and I'm unable to do edits.
My colleague suggested using jQuery but I'd like to avoid that.
How can you force focus to a React object after clicking on that object?
When I am dragging an element down, the form doesn't scroll down when the dragging reaches the bottom.
The reason for this may be that I am manipulating the content of the form by adding an empty placeholder component under the dragged component, and then removing and adding the placeholder each time the dragged component moves over another component. I call revalidate each time the placeholder is removed/added.
Strange thing is that the scrolling works fine when dragging upwards.
Any suggestions for what could be the cause and how I may fix it?
Thanks
I am new to angular and using angular drag and drop. I have "dnd-dragover" attribute in my container. Based on a boolean value from a method, the container will be toggled as draggable or non- draggable.
My questions/requirement:
In case of non-draggable scenario, we cannot drop elements into the container. I need to show an additional message saying "invalid attempt" additionally which will disappear after some time.
I tried uib-tooltip. It is not triggered on drag event.
I googled on it and couldn't find any feasible solution.Any help with the approach would be appreciated.
I created a new component in my grid's listeners: beforeload, and when i called .show() on it, the debugger showed that d.ownerCt is undefined. Any suggestions?
ownerCt is set automatically by the framework as soon as a component is added to a container. It seems that you're calling show() manually indicating that your component is not part of a container hierarchy.
See ownerCt in the Ext JS documentation (here Ext JS 6 classic, but that concept hasn't changed).
This Component's owner Container (is set automatically when this
Component is added to a Container).
Important. This is not a universal upwards navigation pointer. It
indicates the Container which owns and manages this Component if any.
There are other similar relationships such as the button which
activates a menu, or the menu item which activated a submenu, or the
column header which activated the column menu.
These differences are abstracted away by the up method.
Note: to access items within the Container see itemId.