jQuery UI Draggable：无法正常工作但被复制？

Question

我希望掌握 jQuery 和 jQuery UI。这东西很酷，虽然我不是 javascript 的王者，但我可能会看到它的潜力，远非如此！

出于教学目的，我将这段代码写在一个手写的 HTML 文件中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>01 - jQuery UI Draggable Basic Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .dragarea {
                height: 500px;
                width: 500px;
                background: grey;
        }

        #draggable {
                width: 100px;
                height: 100px;
                padding: 20px;
                background: #ccc;
                cursor: pointer;
        }
    </style>
    <script>
        $(document).ready(function() { $( "#draggable" ).draggable(); });
    </script>
</head>
<body>
    <div class="dragarea">
        <div id="draggable">Drag me</div>
    </div>
</body>
</html>

然而，当从这个jQuery UI Draggable 网站复制时，它可以正常工作。

我还阅读了How to create a simple drag and drop with jQuery 上的本教程，以及许多其他 StackOverflow 的 Q/A：

1. jQuery UI Draggable Not Working
2. Can't get JQuery Draggable plugin to work?

仅举几例。

当我说它不能正常工作时，我的意思是我可以在屏幕上看到我的两个 DIV 部分具有正确的样式，并且我无法拖动可拖动矩形，它只是选择了文本和页面就像我试图复制文本一样。这是屏幕上的结果。

我的代码有什么问题？有人可以告诉我吗？

感谢您的支持！ =)

Answer 1

脚本标签不会自动关闭。

<script src="http://code.jquery.com/jquery-1.8.2.js" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" />

FIDDLE: BROKEN

应该是

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

FIDDLE: FIXED