El marcador de arrastre no calcula el ancho correcto.

Hola @artf, espero que estéis teniendo un buen día.

Hay un pequeño problema con el marcador de arrastre cuando un bloque se arrastra hacia un posible contenedor con márgenes laterales. También podría ocurrir con los márgenes superior/inferior o el acolchado, pero no estoy 100% seguro.

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

La razón de esto es que la función getBoundingClientRect, que calcula las dimensiones de un contenedor, se comporta de forma irregular en algunos casos, devolviendo el ancho del elemento sin tener en cuenta algunas propiedades que afectan a ese cálculo.

Alguien tuvo un problema similar antes. https://stackoverflow.com/questions/28966678/getboundingclientrect-returning-wrong-results

En este caso tendremos que ajustar un poco la función getElRect que está en el archivo mixins. Creo que algo así ayudará, aunque todavía tengo que trabajar un poco más para arreglarlo.

const getElRect = el => {
  const def = {
    Arriba: 0,
    izquierda: 0,
    Ancho: 0,
    Altura: 0
  };

si (!el) devuelve la defensa;
  let rectText;
  Sea recto;

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

if (rectText) {
    rect = rectText;
  } else if (el.getBoundingClientRect) {
    sea estilo = window.getComputedStyle(el);
    sea boundingRect = el.getBoundingClientRect();
    Sea margen = {
      izquierda: parseInt(style['margin-left']),
      derecha: parseInt(style['margin-right']),
      arriba: parseInt(style['margin-top']),
      bottom: parseInt(style['margin-bottom'])
    };
    Sea relleno = {
      izquierda: parseInt(style['relleno-izquierda']),
      derecha: parseInt(style['padding-right']),
      arriba: parseInt(estilo['acolchado']),
      abajo: parseInt(estilo['relleno-bottom'])
    };

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

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

return rect;
};

Ahora mismo no tengo tiempo para hacer una pull request, escribo como un problema para llevar un registro de ello, pronto investigaré esto.

Si quieres replicar este problema, puedes crear un componente contenedor con estas propiedades

.container {

ancho: 100%;
 relleno-derecha: 15px;
 relleno-izquierda: 15px;
 margen a la derecha: Auto;
 margen izquierdo: auto;
}

Y otro que podría ir como componente hijo del contenedor

.row {
   pantalla: bloqueo;
   marje: 0;
}

Estoy usando la última versión (v0.16.2), quizá se me esté escapando algo y esto se pueda solucionar fácilmente.

Un saludo cordial, Juan