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：

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

仅举几例。

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

On-screen result of my code above

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

感谢您的支持！ =）

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 的

jQuery UI Draggable：不正常但是复制了吗？

1 个答案: