Margins and keyboard dragging

[alexreardon]

Currently the keyboard dragging is a little bit off visually if you rely on a margin other than margin-bottom. This has to do with margin-collapsing behavior and edge alignment. I did a small spike with promising results.

Work arounds

• use margin-bottom for pushing Draggable's apart
• use padding for pushing Draggables apart
• wrap your element within the Draggable inside another and then use padding to push them apart. Something like this:

render() {
    const { quote, provided } = this.props;

    const style = {
      ...provided.draggableStyle,
      padding: 10,
    };

    return (
      <div style={style} ref={provided.innerRef}>
        <div {...provided.dragHandleProps}>
           <div>Hello world!</div>
        </div>
      </div>
    );
  }

[matthax]

Fiddled around with trying to customize the placeholder to resolve this issue but ended up taking the padding approach. The workaround solved the issue but it would be nice to see if there's more that could be done here.

Worth noting, my attempt was with reactstrap form groups which do specify a margin-bottom as part of their class styles and setting marginBottom through react style props did not solve the issue either. I'm going to play around a little more but in the meantime thanks for the solution.

[alexreardon]

Good news, this will be fixed in version 10 #838

[alexreardon]

try using react-beautiful-dnd-next and let me know if your issue remains @matthax

[alexreardon]

Closed by #838. See version 10 release notes