Sortable element size is not applied correctly if element has padding

[connoratmyxt]

Hi, I found this bug while using your library. I am willing to create a PR to fix this if you'd like.

Steps to reproduce

1. Drag element in list
2. Notice it is larger than before dragging
3. Drop element
4. Notice element being larger than its siblings, and overflowing the container

Expected behavior

Item should stay the same size before, during, and after dragging.

Code

import agnosticDraggable from "https://cdn.skypack.dev/agnostic-draggable@1.4.3";
const { Sortable } = agnosticDraggable

const container = document.createElement("div")
container.style.padding = "4px 0"

const els = new Array(10).fill(null).map(() => document.createElement("div"))
els.forEach((el, i) => {
    el.textContent = "Item: " + (i + 1)
    el.style.padding = "8px"
    el.style.margin = "4px 8px"
    el.style.background = "rgba(127, 127, 127, .1)"

    container.appendChild(el)
})

document.body.appendChild(container)

new Sortable(container)

Suggested solution(s)

Option 1: Don't compute a height and width for dragged elements (would have effects on elements that inherit size from the positioning in the container, for example flexbox and grid elements)

Option 2: Account for padding+border in getting the size of the element (has to account for box-sizing)

[marcospont]

A fix was pushed for this one: https://github.com/marcospont/agnostic-draggable/commit/586cb85aac63e56d3956975afed547b49b89a40a

Codepen link: https://codepen.io/marcospont/pen/ZEvRGMJ