1

並べ替え可能なアイテムをグリッドとしてページに配置しようとしましたが、単なる数字として表示されました。理由を教えてください。

<div class="demo">

<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>

</div>

そして、jQuery の script タグと style タグを次のように head に貼り付けました。

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px;     height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>
4

1 に答える 1

0

CSSファイルが不足しているようです。jquery-ui-x.x.x.cssファイルが含まれていることを確認してください。並べ替え機能は正常に動作しているので、プレゼンテーションの問題のように見えます

Google CDNからCSSを追加しましたが、今は問題ないようです

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" />

float: leftまた、cssからを削除して、リストとして表示することもできます。

于 2012-08-30T15:10:12.140 に答える