未捕获的类型错误：$(...).draggable 不是函数 [重复]

Posted 2023-05-08

【中文标题】未捕获的类型错误：$(...).draggable 不是函数 [重复]

【英文标题】：Uncaught TypeError: $(...).draggable is not a function [duplicate]

【发布时间】：2015-11-20 01:45:24

【问题描述】：

大家好，我正在尝试使一些 div 可拖动，并且我已经设法使用 jquery-ui 做到了这一点。我还有一个脚本可以删除 2 个 div 并将它们组合成一个（就像它们已合并在一起一样）但是当我在新的“合并”div 上调用可拖动函数时，我得到的错误是标题......所以问题是什么 ？ .draggable 函数怎么可能在一个地方工作而不在另一个地方工作（在同一个文件上）！！

这是可拖动的功能：

function drag($class)
$("."+$class).draggable(
containment: ".tab-content",
grid: [ 3, 3 ],
zIndex:100,
obstacle: "#nothere",
preventCollision: true,
drag:
function()
    $(".test").css("background-color","red");
    $(this).css("background-color","green");
    

);
 

首先我为测试类调用它，它可以完美运行而没有错误

drag("test");

但是当我在合并函数中再次调用它时，它返回错误： 未捕获的类型错误：$(...).draggable 不是函数

drag("test:not(.ui-draggable)");

js文件加载正确：

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

【问题讨论】：

可能是你没有加载 jQuery UI 文件

你包含了 jQueryUI 吗？

这道题是不是太难了，没人能解决啊！！！

【参考方案1】：

请务必在您的项目中包含以下文件：

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

查看他们的example。使用开发者工具（Chrome 下 F12）查看是否所有资源都已导入。

【参考方案2】：

我知道这是一个老问题，但因为我遇到了同样的问题，但找不到答案......

我包含了所有正确的脚本，检查了链接是否有效等，但它仍然无法正常工作。

然后我将脚本引用移动到调用 .draggable 的代码的正上方，并且......它完美地工作。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" />

        <script type="text/javascript">
            $(function () 
                $(".regionStyle li").draggable();
                $(".regionStyle").droppable(
                    drop: function (event, ui) 
                        $(this)
                        .addClass("ui-state-highlight")
                        .find("p")
                        .html("Item Dropped!");
                    
                );
            );