0

jQueryのソート可能を使用して、垂直リストから水平リストに単語を追加できるようにしたいと考えています。水平から垂直への移動は期待どおりに機能しますが、垂直から水平への移動はうまく機能しません。単語が飛び降りてしまい、単語を目的の場所に配置するのが非常に難しくなります。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/

4

1 に答える 1

0

でフローティング要素を使用clear:bothして、リストを垂直に保ち、 to とは異なるoverflowものvisibleを設定でき#oatesます。

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

デモ

于 2013-10-20T17:15:30.233 に答える