Wrong draggable item position inside container with translateX property

[Kontsedal]

Bug or feature request?

Bug

Expected behavior

Correct draggable item position during drag

Actual behavior

Wrong draggable item position during drag

Steps to reproduce

Use Droppable inside element with transform: translateX property

Browser version

Chrome (62.0.3202.94) Firefox(57.0)

Demo

https://www.webpackbin.com/bins/-L-17XMBg-57nzCdD4aW

[kasperpihl]

I managed to get this to work with Portal from react-dom without changing styles etc.

I added a dom element into my html

<div id="draggable"></div>

Added the following styles

position: absolute;
pointer-events: none;
height: 100%;
width: 100%;

And then added this to the Draggable

import React, { PureComponent } from 'react';
import { createPortal } from 'react-dom';

const _dragEl = document.getElementById('draggable');

class DraggableGoal extends PureComponent {
  optionalPortal(styles, element) {
    if(styles.position === 'fixed') {
      return createPortal(
        element,
        _dragEl,
      );
    }
    return element;
  }
  render() {
    const { item } = this.props;
    return (
      <Draggable>
        {(provided, snapshot) => {
          return (
            <div>
              {this.optionalPortal(provided.draggableStyle, (
                <div
                  ref={provided.innerRef}
                  style={provided.draggableStyle}
                  {...provided.dragHandleProps}
                >
                  {item}
                </div>
              ))}
              {provided.placeholder}
            </div>
          );
        }}
      </Draggable>
    );
  }
}

Hope this helps :)

[alexreardon]

Thanks @Kontsedal and @kasperpihl! We are tracking this work here: #192