Skip to content

Latest commit

 

History

History
31 lines (16 loc) · 2.92 KB

using-a-portal.md

File metadata and controls

31 lines (16 loc) · 2.92 KB
Raw

Using a Portal

This guide will go through how you can move your Draggable into a React.Portal 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 React.Portal by default

React provides a first class api for using portals: React.Portal. Originally we wanted to use it for all Draggables 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 React.Portal 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 React.Portal on top of react-beautiful-dnd. If you are simply dragging cards in a list then you should be fine using React.Portal. 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 React.Portal to guide you. You can view the source here

Tables

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