Question

我决定从Jqueryui.com测试一些“可排序的用户界面”的代码我将源代码直接复制到记事本并将其保存为sortable.html。
当我在Chrome / Firefox中打开它时，没有任何内容可拖动/可放置或以其他方式排序。它的外观和行为与纯HTML文本列表完全相同。有任何想法吗？文件内容在下面的代码中。

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      </style>
      <script>
      $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
      });
      </script>
    </head>
    <body>

    <ul id="sortable">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>


    </body>
    </html>

Answer 1

如果您将其保存为html文件并在浏览器中打开该文件，则该网址将类似于“file：/// C：/temp.html”。文件中使用的脚本引用格式为'//code.jquery.com/jquery-1.10.2.js'，这意味着如果你的网址是http，那么他们将使用http，如果它是https，他们会使用https。由于您的网址为'file：// ...'，因此无法加载这些引用。因此，基本上将这些引用更改为以“http：”开头。

JQuery UI样板“可排序”代码表现不正常

1 个答案: