Question

我正在尝试创建一个自定义滚动条，我的javascript应该使滚动条拖动不会起作用。（我正在使用Chrome进行测试）

为什么这会返回错误？

// JavaScript Document
    $(document).ready(function(){
        $("#scrollbar-piece").draggable({axis: "y"});
        Uncaught TypeError: undefined is not a function
    })

这是html：

<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="theScriptThatHasAProblem.js"></script>
</head>
<body>
    <div class="page-container">...</div>
    <div id="scrollbar">
        <div id="scrollbar-piece"></div>
    </div>
</body>

Answer 1

draggable是您没有引用的jQuery UI库的一部分。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Google CDN information

draggable documentation

Answer 2

你缺少jQuery UI库。draggable是jquery-ui的一个组件，这不是jQuery的一部分。
你可以从https://jqueryui.com/下载稳定版本。或者，您可以直接从谷歌API中包含以下内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 3

您只包含基本jQuery库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用jQuery draggable & droppable还包括

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

编辑：还要确保脚本的顺序正确。 jQuery必须在jQuery UI之前加载，因为它依赖于它。

看看这个小提琴：http://jsfiddle.net/8YEyc/

为什么我的.draggable方法返回错误？

3 个答案: