react-beautiful-dnd-next/src/state/publish-while-dragging/update-draggables/offset-draggable.js

Beautiful and accessible drag and drop for lists with React

// @flow
import {
  withScroll,
  offset as offsetBox,
  type Position,
  type BoxModel,
} from 'css-box-model';
import type { DraggableDimension } from '../../../types';

type Args = {|
  draggable: DraggableDimension,
  offset: Position,
  initialWindowScroll: Position,
|};

export default ({
  draggable,
  offset,
  initialWindowScroll,
}: Args): DraggableDimension => {
  const client: BoxModel = offsetBox(draggable.client, offset);
  const page: BoxModel = withScroll(client, initialWindowScroll);

  const moved: DraggableDimension = {
    ...draggable,
    placeholder: {
      ...draggable.placeholder,
      client,
    },
    client,
    page,
  };

  return moved;
};