.draggable() 无缘无故不起作用答案

【问题标题】：.draggable() is not working for no reason.draggable() 无缘无故不起作用
【发布时间】：2016-08-22 08:37:37
【问题描述】：

我正在处理我的项目，不得不使用 .draggable()。我无法让它发挥作用，我不知道出了什么问题，所以我决定从 Codeacademy 复制这个练习，看看它是否有效。它也没有用。

我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Game Test</title>
        <link rel='stylesheet' type='text/css' href='art.css' />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>

    </head>
    <body>

        <div id="stayaway"></div>

    </body>
</html>

我的 CSS：

#stayaway {
    width: 80px;
    height: 80px;
    background-color: blue;
    position:relative;
}

我的 JS：

$(document).ready(function(){
        $("#stayaway").draggable();

});

这只是一个基本功能。我不知道这里有什么问题。其他功能，如 fadeOut 正在工作。

【问题讨论】：

标签： javascript jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

你需要包含 jquery-ui 库：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

【讨论】：

【解决方案2】：

一切都很好。你只需要包含 jQuery-UI 文件

$(document).ready(function(){
        $("#stayaway").draggable();

});

Working Fiddle

您可以从here

下载

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>
    <head>
        <title>Game Test</title>
        <link rel='stylesheet' type='text/css' href='art.css' />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

        <script type="text/javascript" src="script.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
#stayaway {
    width: 80px;
    height: 80px;
    background-color: blue;
    position:relative;
}
</style>
    </head>
    <body>

        <div id="stayaway"></div>

    </body>

    <script>
    $(document).ready(function(){
        $("#stayaway").draggable();

});
    </script>
</html>

【讨论】：