Question

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

＆＃13;

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

＆＃13;

 #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; 
       }

＆＃13;

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

＆＃13;

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>

移动时滑动盒上下跳动

1 个答案: