Drag placeholder does not calculate the correct width.

HI @artf, I hope you are having a nice day.

There's a small issue with the drag placeholder when a block is being dragged into a possible container with lateral margins, It could happen also with top/bottom margins or padding but I'm not 100% sure.

<img width="1107" alt="image" src="https://user-images.githubusercontent.com/1976679/76625994-9e803e00-6538-11ea-900e-fbbe3769cabe.png">

The reason for this being the function getBoundingClientRect that calculates the dimensions of a container, behaves irregularly in some cases, returning the width of the element without taking into account some properties that affects that calculation.

Someone had a similar problem before. https://stackoverflow.com/questions/28966678/getboundingclientrect-returning-wrong-results

In this case we will have to tweak a little the getElRect function located in the mixins file. I think something like this will help, although i still have to work a little bit more on it to make it right.

const getElRect = el => {
  const def = {
    top: 0,
    left: 0,
    width: 0,
    height: 0
  };

  if (!el) return def;
  let rectText;
  let rect;

  if (isTextNode(el)) {
    const range = document.createRange();
    range.selectNode(el);
    rectText = range.getBoundingClientRect();
    range.detach();
  }

  if (rectText) {
    rect = rectText;
  } else if (el.getBoundingClientRect) {
    let style = window.getComputedStyle(el);
    let boundingRect = el.getBoundingClientRect();
    let margin = {
      left: parseInt(style['margin-left']),
      right: parseInt(style['margin-right']),
      top: parseInt(style['margin-top']),
      bottom: parseInt(style['margin-bottom'])
    };
    let padding = {
      left: parseInt(style['padding-left']),
      right: parseInt(style['padding-right']),
      top: parseInt(style['padding-top']),
      bottom: parseInt(style['padding-bottom'])
    };

    boundingRect.width = boundingRect.width - margin.left - margin.right;
    boundingRect.left = 0 + bounding.left;

    rect.width = boundingRect;
  } else {
    rect = def;
  }

  return rect;
};

At the moment i do not have the time to do a pull request, I'm writing as an issue to keep a record of it, i will dig on this soon.

If you want to replicate this issue you can create a container component with these properties

.container {

width: 100%;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

And another one the could go as a child component of the container

.row {
   display: block;
   margin: 0;
}

I'm using the latest version (v0.16.2), maybe there's something that I'm missing and this could be easily solved.

Best Regards, Juan