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

Question

I have an issue while sorting the list items when width if all the <li> is not equal. In the example below I try to place "Item 6" just after "Item 4" to no avail.

 $('#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

Actually you still can put Item 6 after Item 4 (eg. put Item 6 before Item 4 first then move it after Item 4). It's just a bit difficult. Adding grid option makes it easier. Try to run this snippet:

 $('#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>