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的浮动元素将列表保持为垂直，并设置与overflow不同的visible到#oates：

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

Demo

jQuery可以从垂直到水平排序

1 个答案: