Sortable 不是函数 Jquery UI

Question

当我尝试将 sortable 功能添加到 table 时，我遇到了这个错误。该项目是一个 Asp.net Mvc 项目。

我不知道为什么会出现此错误。当我在 VS 代码中作为一个干净的前端环境执行此操作时，即使我使用相同的包含，我也不会收到此错误。但是在 Visual Studio Asp.net mvc 项目中可能有不止一个 jquery 包含。但我不知道如何检测和解决。这个项目是别人开发的。我被要求添加 sortable ui 功能。

error

script include

browser network tab

code

Answer 1

考虑以下代码。

$(function() {
  $("#sortable > tbody").sortable();
  $("#sortable").disableSelection();
});

#sortable {
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable td {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable td span {
  position: absolute;
  margin-left: -1.3em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

https://api.jqueryui.com/sortable/

Note: In order to sort table rows, the tbody must be made sortable, not the table.

Sortable 不是函数 Jquery UI

Sortable is not a function Jquery UI

asp.net-mvc

jquery

jquery-ui