You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
I'm trying to use react-zoom-pan-pinch with react-dnd but items nested within the are not responding to drag events. I've tried disabling panning to see if that helps but I am still unable to drag items. Items are responding to other mouse events such as mouseOver, click, mouseDown, mouseUp etc. I'm also seeing the canDrag() value from react-dnd for the draggable item returning as true. The native onDrag prop on elements within the are also not triggering an event.
Expected behavior
I would like to be able to able to both zoom, pan and drag and drop items within the
Desktop (please complete the following information):
OS: MacOs
Browser: Chrome
Version: 3.4.3
The text was updated successfully, but these errors were encountered:
3. use these event listener on the Draggable Element to enable and disable state:
onMouseDown -> which sets the state to true
onDragEnd -> which sets the state to false
onMouseUp -> which sets the state to false
For example, if this div is the root of your draggable component, it could look like this: <div ref={drop} style={styles} onMouseDown={**callbackToSetStateToTrue**} onDragEnd={**callbackToSetStateToFalse**} onMouseUp={**callbackToSetStateToFalse**}>...</div>
One more thing I had to struggle with:
If you use a CustomDragLayer for previewing the dragged component, you might encounter offset issues. This is because the TransformWrapper uses translate, which confines the DragLayer to the width and height of the TransformWrapper. This limitation does not apply to monitor.getInitialSourceClientOffset from the useDragLayer hook. Therefore, you can wrap the DragLayerComponent with a Portal component (I use mui/react). It likely also works with createPortal() from react-dom.
Describe the bug
I'm trying to use
react-zoom-pan-pinch
withreact-dnd
but items nested within the are not responding to drag events. I've tried disabling panning to see if that helps but I am still unable to drag items. Items are responding to other mouse events such as mouseOver, click, mouseDown, mouseUp etc. I'm also seeing thecanDrag()
value from react-dnd for the draggable item returning as true. The nativeonDrag
prop on elements within the are also not triggering an event.Expected behavior
I would like to be able to able to both zoom, pan and drag and drop items within the
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: