Question

我尝试将可排序的项目作为网格放在我的页面中，但它看起来只是简单的数字，请告诉我原因。

<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中粘贴了jQuery中的脚本和样式标签：

<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>

Answer 1

您似乎缺少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" />

您可能还想从css中删除float: left，以便它们显示为列表

我用于页面的jQuery UI可排序项不起作用？

1 个答案: