Question

大家好我想让一些divs拖延，我已经设法用jquery-ui做到了。我还有一个脚本，删除2个div并将它们合并为一个（如果它们已经合并在一起）但是当我在新的＆＃34;合并＆＃34;上调用可拖动函数时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");

但是当我在merge函数中再次调用它时会返回错误：未捕获的TypeError：$（...）。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>

Answer 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）查看是否已导入所有资源。

Answer 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!");
                    }
                });
            });

未捕获的TypeError：$（...）。draggable不是函数

2 个答案: