javascript - 当所有列表项的宽度不相等时，jQueryUI 排序问题

Question

当宽度为 <li> 时，我在对列表项进行排序时遇到问题不相等。在下面的示例中，我尝试将“Item 6”放置在“Item 4”之后，但没有成功。

$('#sort').sortable({ 
    
});

ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    background: #0f0;
    width: 25%;
}
.ui-sortable-placeholder {
    height: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sort">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li style="width:100%;">Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

Answer 1

实际上，您仍然可以将项目 6 放在项目 4 之后(例如，先将项目 6 放在项目 4 之前，然后将其移到项目 4 之后)。只是有点困难。添加grid选项使其变得更容易。尝试运行此代码片段:

$('#sort').sortable({ 
    grid: [ 10, 10 ]
});

ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    background: #0f0;
    width: 25%;
}
.ui-sortable-placeholder {
    height: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul id="sort">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li style="width:100%;">Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>