title: React Dnd out of position after scroll
body: <p>I'm using <code>react-beautiful-dnd</code> to make table rows draggable.<br/>
  The dragging is working fine if I am going from top to bottom, and when I scroll the page up it gets out of position.<br/>
  I have no idea why.<br/>
  Also, I didn't find anything weird with css<br/></p>
  
  <p>I have no idea why this is happening and don't know how to fix this.
  Here is an example of my problem.</p>
  
  <p><a href="https://i.stack.imgur.com/gSl5W.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSl5W.gif" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>import update from "immutability-helper";
  import * as React from "react";
  import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
  import { WithNamespaces, withNamespaces } from "react-i18next";
  import { toastr } from "react-redux-toastr";
  import * as HttpHelper from "../../httpHelper";
  import { FormState } from "../common/ValidatedForm";
  type Props = WithNamespaces &amp; {
    id: number;
    displayName: string;
    type: string;
    language: any;
  };
  
  interface Fields {
    columns: any;
  }
  
  type State = FormState&lt;Fields&gt; &amp; {
    isLoading: boolean,
    canSave: boolean,
    isSaving: boolean,
    possibleTags: any,
    configTagModalActive: boolean,
    previewModalActive: boolean,
    activeTag: any
  };
  const getItemStyle = (isDragging: any, draggableStyle: any) =&gt; ({
    ...draggableStyle,
    opacity: isDragging ? 1 : 1,
    boxShadow: "0px 0px 0px 1px #8b8b8b",
  });
  const shadowColor = "#a0a0a057";
  const Column = (props: any) =&gt; {
    function findindex(val: any, pt: any) {
      const list = pt ? props.possibleTags : props.tags;
      return list.findIndex((item: any) =&gt; val == item.name);
    }
    function findindexofhelptext(val: any, pt: any) {
      const list = pt;
      return list.findIndex((item: any) =&gt; val == item.language);
    }
    return (
      &lt;tr ref={props.provided.innerRef} {...props.provided.draggableProps} style={getItemStyle(props.snapshot.isDragging, props.provided.draggableProps.style)} className={"draggablerow " + (props.snapshot.isDragging ? "draggedrow" : "") } key={props.indexnr} data-id={props.index} &gt;
        &lt;td {...props.provided.dragHandleProps} style={{width: "50px", textAlign: "center", cursor: "move"}}&gt;&lt;i className="fa fa-bars" style={{lineHeight: "40px", fontSize: "24px"}}&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td style={{ textAlign: "center", width: "100px" }}&gt;
          &lt;input
            type="checkbox"
            className="flipswitch"
            id={props.index}
            checked={props.export}
            onChange={props.toggleVisible}
          /&gt;
        &lt;/td&gt;
        &lt;td style={{width: "350px" }}&gt;
          &lt;input
            type="text"
            name="caption"
            id={props.index}
            className="form-control"
            value={props.caption}
            onChange={props.onTextUpdate}
            style={{boxShadow: "2px 2px 3px 1px" + shadowColor}}
          /&gt;
        &lt;/td&gt;
        &lt;td style={{width: "350px" }}&gt;
          &lt;input
            type="text"
            name="fieldname"
            id={props.index}
            className="form-control"
            value={props.fieldname}
            onChange={props.onTextUpdate}
            style={{boxShadow: "2px 2px 3px 1px" + shadowColor}}
          /&gt;
        &lt;/td&gt;
        &lt;td style={{width: "400px"}}&gt;
          &lt;div className="tags-input" style={tagInputStyle}&gt;
            {Object.keys(props.tags).map((key, i) =&gt;
              &lt;div key={i} className="tag" onClick={props.onConfigButtonClicked} data-id={i} data-parent={props.index}&gt;
                {props.tags[i].name} &lt;i className="fa fa-trash" id={props.index} data-key={i} data-name={props.tags[i].name} onClick={props.onDeleteTag} style={{float: "right"}} &gt;&lt;/i&gt;
              &lt;/div&gt;
            )}
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td style={{ textAlign: "center", width: "100px" }}&gt;
          &lt;button onClick={() =&gt; props.onDeleteColumn(props.index)} type="button" style={{padding : "8px 16px", boxShadow: "2px 2px 2px 1px" + shadowColor }} className="btn btn-danger btn-rounded"&gt;&lt;i className="fa fa-trash"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/td&gt;
        &lt;/tr&gt;
    );
  };
  const reorder = (list: any, startIndex: any, endIndex: any) =&gt; {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
  };
  interface SetColumnsResponse extends HttpHelper.ResponseData { columns: any; }
  
  class CrmConnectorColumns extends React.Component&lt;Props, State&gt; {
  
    constructor(props: Props) {
      super(props);
      this.moveColumn = this.moveColumn.bind(this);
      this.state = {
        isLoading: true,
        isSaving: false,
        canSave: false,
        errorColor: "danger",
        fields: { columns: [] },
        deleteModalActive: false,
        configTagModalActive: false,
        previewModalActive: false,
        activeTag: {name: "", attributes: [{name: "", value: ""}]},
        possibleTags: [
          {name: "PRIMARY", status: "new", helptexts: [
            {language: "nl", helptext: "Dit is de primary key"},
            {language: "en", helptext: "This is the primary key"}
          ], attributes: [], uses: 1},
          {name: "SUBTITLE", status: "new", helptexts: [
            {language: "nl", helptext: "Dit is de subtitel van een record"},
            {language: "en", helptext: "This is The subtitle of a record"}
          ], attributes: [], uses: 1},
          {name: "URL", status: "new", helptexts: [
            {language: "nl", helptext: "De waarde wordt gezien als link."},
            {language: "en", helptext: "The value becomes a link."}
          ], attributes: [
            {name: "link", status: "new", helptexts: [
              {language: "nl", helptext: "De link krijgt deze waarde. Voorbeeld waarde is \"http://www.google.nl?search=[naam]\". de waarde van \"[naam]\" wordt ingevuld."},
              {language: "en", helptext: "The link gets this value. Example value is \"http://www.google.nl?search=[name]\". the value of \"[name]\" gets filled in."}
            ]}
          ], uses: undefined},
          {name: "TITLE", status: "new", helptexts: [
            {language: "nl", helptext: "Dit is de hoofdtitel van een record"},
            {language: "en", helptext: "This is the maintitle of a record"}
          ], attributes: [], uses: 1},
          {name: "PHONE", status: "new", helptexts: [
            {language: "nl", helptext: "De waarde wordt gezien als telefoonnummer"},
            {language: "en", helptext: "The value becomes a phonenumber"}
          ], attributes: [], uses: undefined},
          {name: "BUTTON", status: "new", helptexts: [
            {language: "nl", helptext: "Uiterlijk van een knop"},
            {language: "en", helptext: "The value becomes a button"}
          ], attributes: [], uses: undefined},
          {name: "EMAIL", status: "new", helptexts: [
            {language: "nl", helptext: "De waarde wordt gezien als e-mail adres"},
            {language: "en", helptext: "The value becomes a emailaddress"}
          ], attributes: [], uses: undefined},
          {name: "IMAGE", status: "new", helptexts: [
            {language: "nl", helptext: "De waarde wordt als afbeelding weergegeven"},
            {language: "en", helptext: "The value gets displayed as image"}
          ], attributes: [], uses: undefined},
          {name: "HTML", status: "new", helptexts: [
            {language: "nl", helptext: "De waarde wordt gezien als HTML"},
            {language: "en", helptext: "The value gets seen as custom HTML"}
          ], attributes: [
            {name: "HTML code", status: "new", helptexts: [
              {language: "nl", helptext: "Vul hier je custom HTML code in. De waarde tussen de [] word vervangen door de data."},
              {language: "en", helptext: "Enter your custom HTML here. The value between the [] will be replaced for the value."}
            ]}
          ], uses: undefined}
        ]
      };
      this.onDragEnd = this.onDragEnd.bind(this);
    }
    onDragEnd(result: any) {
      // dropped outside the columns table
      if (!result.destination) {
        return;
      }
      let newlist = [...this.state.fields.columns];
      newlist = reorder(
        newlist,
        result.source.index,
        result.destination.index
      );
      Object.keys(newlist).forEach((nr) =&gt; {
        newlist[parseInt(nr, 10)].index = parseInt(nr, 10);
      });
      this.setState({ fields: { columns: newlist } });
      this.setState({ canSave: true });
    }
    async componentDidMount() {
      console.log("Start select columns");
      const fields = await HttpHelper.getJson&lt;Fields&gt;(`/${this.props.type}/${this.props.id}/columns`);
      this.setState(prevState =&gt; {
        return update(prevState, {
          fields: { $set: fields },
          isLoading: { $set: false },
        });
      });
      if (this.state.fields.columns == undefined) {
        this.setState({ fields: { columns: [] } });
      }
      for (let i = 0; i &lt; fields.columns.length; i++) {
        fields.columns[i].index = i;
      }
      this.setState({ fields: { columns: fields.columns } });
      const newlist = [...this.state.possibleTags];
  
      for (const column of fields.columns) {
        for (const tags of column.tags) {
          const index = newlist.map((item) =&gt; item.name).indexOf(tags.name);
          if (newlist[index].uses &gt; 0) {
            newlist[index].uses = 0;
          }
        }
      }
      this.setState({ possibleTags: newlist });
    }
    moveColumn(index: any, indexnr: any) {
      const cards = this.state.fields.columns;
      const sourceCard = cards.find((card: any) =&gt; card.index === index);
      const sortCards = cards.filter((card: any) =&gt; card.index !== index);
      sortCards.splice(indexnr, 0, sourceCard);
       Object.keys(sortCards).forEach((nr) =&gt; {
      sortCards[nr].index = parseInt(nr, 10);
      });
      this.setState({ fields: { columns: sortCards } });
      this.setState({ canSave: true });
    }
  
    onDragStart = (e: any) =&gt; {
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData("text/html", e.target.parentNode);
      e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
    }
    ondragOver(e: any) {
      e.preventDefault();
    }
  
    public render() {
      const columns = this.state.fields.columns || [] ;
      const { t } = this.props;
      let placeholder: any;
  
      if (columns.length &lt; 1) {
        placeholder = &lt;tr style={{boxShadow: "0px 0px 0px 1px #8b8b8b", textAlign: "center"}} className={"draggablerow"}&gt;&lt;td colSpan={6} &gt;{t("placeholder")}&lt;/td&gt;&lt;/tr&gt;;
      }
      return (
        &lt;form&gt;
          &lt;div className="App"&gt;
            &lt;main&gt;
              &lt;button onClick={this.onSubmit} className="btn btn-primary" type="submit" style={{float: "right", boxShadow: "2px 2px 3px 1px" + shadowColor}} disabled={!this.state.canSave || this.state.isSaving}&gt;{this.state.isSaving ? &lt;i className="fa fa-spinner fa-spin"&gt;&lt;/i&gt; : ""} {this.props.t("update")}&lt;/button&gt;
              &lt;button onClick={this.onPreviewButtonClicked} type="button" className="btn btn-primary"  style={{float: "right", boxShadow: "2px 2px 3px 1px" + shadowColor, marginRight: "5px"}} &gt;Preview&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
                &lt;table className="col-8 table columns" style={{tableLayout: "auto"}} &gt;
                  &lt;thead className="" style={{border: "2px solid #1b2847", background: "#1b2847", color: "white"}}&gt;
                    &lt;tr&gt;
                      &lt;th colSpan={2} style={{textAlign: "center"}}&gt;
                        &lt;button onClick={this.onAddColumn} disabled={columns.length &gt; 14 ? true : false} type="button" style={{padding : "8px 16px", boxShadow: "2px 2px 3px 1px" + shadowColor }} className="btn btn-primary btn-rounded"&gt;&lt;i className="fa fa-plus"&gt;&lt;/i&gt; &lt;/button&gt;
                      &lt;/th&gt;
                      &lt;th&gt;{t("displayname")}&lt;/th&gt;
                      &lt;th&gt;Element&lt;/th&gt;
                      &lt;th&gt;Tags&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;Droppable droppableId="droppable" direction="vertical"&gt;
                    {(provided: any) =&gt; (
                      &lt;tbody  ref={provided.innerRef}&gt;
                        {Object.keys(columns).map((element, key) =&gt; (
                          &lt;Draggable key={"draggable" + key} draggableId={element} index={key}&gt;
                          {(provided, snapshot) =&gt; (
                            &lt;Column
                            key={"column" + key}
                            indexnr={key}
                            toggleVisible={this.toggleVisible}
                            onTextUpdate={this.onTextUpdate}
                            onDeleteColumn={this.onDeleteColumn}
                            onDeleteTag={this.onDeleteTag}
                            onAddTag={this.onAddTag}
                            possibleTags={this.state.possibleTags}
                            onConfigButtonClicked={this.onConfigButtonClicked}
                            onPreviewButtonClicked={this.onPreviewButtonClicked}
                            onClosePreview={this.onClosePreview}
                            provided={provided}
                            snapshot={snapshot}
                            language={this.props.language}
                            {...columns[key]}
                            /&gt;
                          )}
                          &lt;/Draggable&gt;
                        ))}
                        {provided.placeholder}
                       &lt;/tbody&gt;
                    )}
                  &lt;/Droppable&gt;
                &lt;/table&gt;
              &lt;/DragDropContext&gt;
            &lt;/main&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      );
    }
  }
  export default withNamespaces(["crmConnectorColumns", "Common"])(CrmConnectorColumns);
  </code></pre>
  
  <p>I hope someone can find out why my draggable get out of position when I scroll down on the page.</p>