javascript - 滑动框在移动时上下跳动

Question

我有这段代码，我一直在使用它，但在我的一生中，我无法弄清楚为什么会这样。当您单击并从左向右拖动一个框时，其余部分会滑动以按设计填充空位。当发生这种情况时，其余的框会下降，而不是在我放下我单击并拖动的框时备份。有没有办法让所有东西都与移动的盒子保持在同一水平线/同一直线上？

$( function() {
       $( "#sortable" ).sortable();
       $( "#sortable" ).disableSelection();
      } );

 #sortable { list-style-type: none;
			  margin: 0;
 			  padding: 0;
			  width: 100%;
			  border: 1px solid black;
			  }

              #sortable li { margin: 0 3px 3px 3px;
				 padding: 0.4em;
				 padding-left: 1.5em;
				 font-size: 1.4em;
				 height: 128px;
				 width: 150px;
				 display: inline-block;
				 padding: 5px;
				 border: 1px solid black;
				 background-color: #BF55EC;
				 }
				 
              #sortable li span { position: absolute;
					  margin-left: -1.3em;
					}
  
      .topper {
		
		padding-top: 100px; 
       }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="topper">
  <ul id="sortable">
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  </ul>
</div>
 

jsFiddle HERE: 任何帮助将不胜感激!

Answer 1

如果将 display:inline-block 更改为 display:block 并添加 float:left，您将获得相同的布局，但跳跃不再发生。

我不知道为什么他们用inline-block 跳转，但这会解决它。

$( function() {
       $( "#sortable" ).sortable();
       $( "#sortable" ).disableSelection();
      } );

 #sortable { list-style-type: none;
			  margin: 0;
 			  padding: 0;
			  width: 100%;
			  border: 1px solid black;
			  }

              #sortable li { margin: 0 3px 3px 3px;
				 padding: 0.4em;
				 padding-left: 1.5em;
				 font-size: 1.4em;
				 height: 128px;
				 width: 150px;
				 display: block;
         float: left;
				 padding: 5px;
				 border: 1px solid black;
				 background-color: #BF55EC;
				 }
				 
              #sortable li span { position: absolute;
					  margin-left: -1.3em;
					}
  
      .topper {
		
		padding-top: 100px; 
       }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="topper">
  <ul id="sortable">
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  </ul>
</div>