jQuery可從垂直排列到水平排列

我希望能夠使用jQuery排序將單詞從垂直列表添加到水平列表。按預期從水平走向垂直走向，但從垂直走向水平走向，效果不佳。它會讓單詞跳下來，並且很難將單詞放在所需的位置。它工作正常，如果我將css屬性float：left添加到#oates p選擇器，但我想避免這種情況，因爲我想保持列表垂直。jQuery可從垂直排列到水平排列

有什麼建議嗎？

謝謝。代碼和小提琴下面

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/

來源

2013-10-20 user1831677

我不明白所需的行爲。而且你說你從垂直到水平有問題，但是你說你想保持垂直列表？ – Oriol

期望的行爲是;用戶可以從垂直列表中選擇任何單詞並將其添加到上面的句子（在所需的位置）（水平列表）。 – user1831677

你可以使用浮動元素與clear:both保持清單垂直，並設置了不同overflow比visible到#oates：

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

Demo

來源

2013-10-20 17:15:30 Oriol

感謝它現在似乎正常工作。 – user1831677

jQuery可從垂直排列到水平排列

回答

相關問題