jquery - jQuery可从垂直到水平排序

Question

我希望能够使用 jQuery 的 sortable 将垂直列表中的单词添加到水平列表中。从水平到垂直按预期工作，但从垂直到水平，它的效果很差。它使单词跳下，很难将单词放在所需的位置。如果我将 css 属性 float:left 添加到 #oates p 选择器，它工作正常，但我想避免这种情况，因为我想保持列表垂直。

有什么建议么？

谢谢。下面的代码和小提琴

html

<div id="sortable" class="connectedSortable">
 <p>The </p>
 <p>dog </p>
 <p>ate </p>
</div>

<div id="oates" class="connectedSortable">
 <p>green </p>
 <p>grass </p>
 <p>for </p>
 <p>lunch </p>
</div>

css

#sortable p {
float: left;
padding: 2px;
}

#sortable  {
padding-left: 20px;
border: solid black 2px;
height: 100px; 
}

#oates {
margin: 20px;
color: red; 
padding-left: 20px;
border: solid blue 1px;

} 

#oates p {
  /* float:left;*/

}

jQuery

$(function() {

$( "#sortable, #oates" ).sortable({

  connectWith: ".connectedSortable"

}).disableSelection();

});

小提琴：http: //jsfiddle.net/9MTq6/

Answer 1

您可以使用浮动元素clear:both来保持列表垂直，并将 a 设置为overflow不同于visibleto #oates：

#oates {
    overflow:auto; /*or hidden*/     
} 
#oates p {
   float:left;
   clear:both;
}

演示