Fix size issues when not using border-box

Author: jvanbruegge

src/eventHandlers/mousedown.ts

@@ -79,23 +79,37 @@ function createGhost(
     node: VNode
 ): VNode {
     const rect = item.getBoundingClientRect();
+    const style = getComputedStyle(item);
+    const padding = {
+        top: parseFloat(style.paddingTop) + parseFloat(style.borderTop),
+        left: parseFloat(style.paddingLeft) + parseFloat(style.borderLeft),
+        bottom:
+            parseFloat(style.paddingBottom) + parseFloat(style.borderBottom),
+        right: parseFloat(style.paddingRight) + parseFloat(style.borderRight)
+    };
     const parentRect = item.parentElement.getBoundingClientRect();
-    const offsetX = ev.clientX - rect.left + parentRect.left;
-    const offsetY = ev.clientY - rect.top + parentRect.top;
+    const offsetX =
+        ev.clientX - rect.left + parentRect.left + parseFloat(style.marginLeft);
+    const offsetY =
+        ev.clientY - rect.top + parentRect.top + parseFloat(style.marginTop);
+
+    const sub = style.boxSizing !== 'border-box';
 
     return addDataEntry(
         addDataEntry(node, 'dataset', {
             offsetX,
             offsetY,
-            item
+            item,
+            ghost: true
         }),
         'style',
         {
             position: 'absolute',
             left: ev.clientX - offsetX + 'px',
             top: ev.clientY - offsetY + 'px',
-            width: rect.width + 'px',
-            height: rect.height + 'px',
+            width: rect.width - (sub ? padding.left - padding.right : 0) + 'px',
+            height:
+                rect.height - (sub ? padding.top - padding.bottom : 0) + 'px',
             'pointer-events': 'none'
         }
     );

src/eventHandlers/mousemove.ts

@@ -12,9 +12,11 @@ export function mousemoveHandler(
         .map(n => n.data.dataset.item)
         .filter(n => !!n)[0];
 
-    const siblings = Array.prototype.slice.call(item.parentElement.children);
+    const siblings: Element[] = Array.prototype.slice.call(
+        item.parentElement.children
+    );
     const index = siblings.indexOf(item);
-    const ghost = siblings[siblings.length - 1];
+    const ghost = siblings.filter(el => (el as any).dataset.ghost)[0];
     const itemArea = getArea(ghost);
     let swapIndex = index;