Неожиданная ширина в магазине перетаскиваемого элемента

Question

Я сделал простой перетаскиваемый список, используя shopify перетаскиваемый плагин

  <ul id="myList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

ul {
  width: 50%;
  border: 1px solid black;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 5px;
  background: salmon;
  width: calc(100% - 10px);
  cursor: move;
}

По какой-то причине при перетаскивании ширина перетаскиваемого элемента становится намного больше, чем у исходного элемента. Я подозреваю, что это потому, что я установил ширину в процентах и ​​что она извлекается из родительского контейнера, поэтому ссылка на процент изменяется. Я сделал демо jsfiddle:

https://jsfiddle.net/x3jmkysq/1/

Я бы хотел, чтобы это работало как в следующем примере: https://shopify.github.io/draggable/examples/simple-list.html но я не знаю, как именно они этого добились.

Answer 1

В любом случае, я нашел решение здесь: https://github.com/Shopify/draggable/issues/147

По существу, существует свойство для расчета размеров перетаскиваемого элемента из исходного элемента с именем constrainDimensions.