JQuery UI'可拖动不是函数'未捕获的TypeError

Posted 2023-05-08

【中文标题】JQuery UI\'可拖动不是函数\'未捕获的TypeError

【英文标题】：JQuery UI 'draggable is not a function' Uncaught TypeErrorJQuery UI'可拖动不是函数'未捕获的TypeError

【发布时间】：2021-10-09 12:54:50

【问题描述】：

我正在尝试在表中的行上使用可拖动的 JQuery，但不断收到错误“$(...).draggable 不是函数”。在我的代码中，我检查了 JQuery 和 JQuery UI（3.6.0 和 1.12.1）的版本，并且在我尝试使用可拖动功能之前它们已经加载。我可以在 tbody 上使用 sortable 并且它工作正常，所以我不知道这个错误来自哪里。任何帮助都会很棒，谢谢。

html

 <table>
  <tbody>
   <tr>1</tr>
   <tr>2</tr>
   <tr>3</tr>
   <tr>4</tr>
  </tbody>
 </table>

JS

$(function() 
    if (window.jQuery && window.jQuery.ui) 
        $("tr").draggable(
            appendTo: "tbody",
            helper: "clone"
        );
    
);

【问题讨论】：

正确创建表并尝试。你错过了<td>。 <table><tbody><tr><td>1</td></tr>..... 当我尝试正确格式化的表格时它的工作。

如果加载了 jQuery 和 jQuery UI 库，您的示例看起来应该可以工作。您没有包含完整的示例，因此您无法知道错误出现的原因。请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

【参考方案1】：

考虑以下示例。

$(function() 
  if (window.jQuery && window.jQuery.ui) 
    $("table tbody tr").draggable(
      appendTo: "tbody",
      helper: "clone"
    );
  
);

<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>
  <tbody>
    <tr>
      <td>Item 1</td>
    </tr>
    <tr>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Item 3</td>
    </tr>
    <tr>
      <td>Item 4</td>
    </tr>
  </tbody>
</table>

在此示例中，每一行都是可拖动的。