jQuery сортируется по вертикали и по горизонтали

Question

Я хочу, чтобы добавить слова из вертикального списка в горизонтальное, используя сортировку jQuery. Переход от горизонтали к вертикали работает, как и ожидалось, но переходя от вертикали к горизонтали, он работает плохо. Это заставляет слова спрыгивать, и очень сложно поместить слово в нужное место. Он отлично работает, если я добавляю свойство float css: left to #oates p selector, но я хочу избежать этого, поскольку я хочу, чтобы список был вертикальным.

Любые предложения?

Спасибо. код и скрипку ниже

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(); 

}); 

Fiddle: http://jsfiddle.net/9MTq6/

Answer 1

Вы можете использовать плавающие элементы с clear:both, чтобы сохранить список, как по вертикали, и установить различные overflow чем visible к #oates:

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

Demo