拖动具有内联宽度百分比的元素时，Jquery UI 可排序宽度不正确

Question

我正在使用可排序的 Jquery UI 对一组 div 进行排序，这些 div 的百分比宽度在运行时之前是未知的。因此，我通过内联样式设置它们。

问题是当可排序的 div 被拖动时，它的宽度不会被计算并相应地设置，因此它会拉伸到错误元素的百分比。

这是 jquery UI 中的错误还是我遗漏了什么？

这里是一些简化的 html

<div id="Container">

<div id="mainColumn">
    <div style="width:80%;" class="sortableItem">
        Item 1 needs 80% width
    </div>
     <div style="width:100%;" class="sortableItem">
        Item 2 needs 100% width
    </div>

     <div style="width:50%;" class="sortableItem">
        Item 3 needs 50% width
    </div>
</div>      

这是一个显示问题的小提琴https://jsfiddle.net/qkunja68/ 拖动 3 个项目时，它们不会保持宽度。

Answer 1

你可以在调用 sortable() 时将可排序对象的 forceHelperSize 属性设置为 true

我将 fiddle JavaScript 代码更改为此代码以使其正常工作

$('#mainColumn').sortable({
 items:'.sortableItem',
  forceHelperSize: true
 });