我在页面中使用的jQuery UI可排序项目;不起作用

jQuery UI sortable items that I used for my page doesn't work?

本文关键字：UI 排序 项目 不起作用 jQuery      更新时间：2023-09-26

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

<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的脚本和样式标签粘贴在头上，如下所示：

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

似乎缺少CSS文件。请确保已包含jquery-ui-x.x.x.css文件。排序功能运行良好，所以看起来像是演示的问题

我从谷歌CDN添加了CSS，现在看起来很好

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

您可能还想从css中删除float: left，使其显示为列表

相关文章：