Skip to content

Latest commit

 

History

History
33 lines (17 loc) · 3.06 KB

using-a-portal.md

File metadata and controls

33 lines (17 loc) · 3.06 KB
Raw

Using a Portal

This guide will go through how you can move your <Draggable /> into a ReactDOM.createPortal while dragging.

⚠️ Moving items into a React Portal after a touchstart is currently not working 😞. React issue: #13113. We are tracking it here: #582. Due to this issue with React Portals drag and drop will not work on touch devices if using a React Portal

Background

We leave elements in place when dragging. We apply position: fixed on elements when we are moving them around. This is quite robust and allows for you to have position: relative | absolute | fixed parents. However, unfortunately position:fixed is impacted by transform (such as transform: rotate(10deg);). This means that if you have a transform: * on one of the parents of a <Draggable /> then the positioning logic will be incorrect while dragging. Lame! For most consumers this will not be an issue.

To get around the issue you can use a portal.

Portals

Wait, what is a portal? A portal is a simply another DOM node outside of the current component tree. By using a portal you are able to move the <Draggable /> into another DOM node while dragging. This can allow you to get around the limitations of position: fixed.

Not using ReactDOM.createPortal by default

React provides a first class api for using portals: ReactDOM.createPortal. Originally we wanted to use it for all <Draggable />s while dragging. Unfortunately it has a big performance penalty - especially when dragging nodes with a lot of children (React issue). The reason for this is because components moving to a ReactDOM.createPortal are mounted and remounted which is quite expensive. Therefore we are currently not supporting it out of the box.

If your <Draggable /> does not have many children nodes then you are welcome to use ReactDOM.createPortal on top of react-beautiful-dnd. If you are simply dragging cards in a list then you should be fine using ReactDOM.createPortal. However, if you are dragging a column full of cards then you will get significant jank when a drag is starting.

Example

We have created a working example that uses ReactDOM.createPortal to guide you. You can view the source here.

Tables

If you are doing drag and drop reordering within a <table> we have created a portal section inside our table guide

← Back to documentation