shopify可拖动元素中的意外宽度

Question

我使用shopify draggable plugin

做了一个简单的可拖动列表

  <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。