Question

如果所有<li>不相等，则在宽度排序列表项时出现问题。在下面的示例中，我尝试放置＆＃34;项目6＆＃34;在＆＃34;项目4＆＃34;之后无济于事。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

实际上你仍然可以在第4项之后放置第6项（例如，在第4项之前放置第6项，然后在第4项之后移动第6项）。这有点困难。添加grid选项可以更轻松。尝试运行此代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: