Question

所以，这是有史以来最奇怪的事情。我正在开发一个关于codepen的项目（当然在codepen中要容易得多）。

如何从codepen迁移？好吧，你几乎只需要添加基本的html标签和链接，这样你就可以在css和js之间进行通信。

但是虽然我正在做所有这些（也添加了所需的库），但我的代码无法正常工作。

我的代码应该做什么： - 允许用户拖动窗口

但事实并非如此！

更重要的是，所有Jquery和Jquery UI函数都无法正常工作。当我查看控制台时，发现以下错误"ReferenceError: $ is not defined"。

好的，现在我正在使用的代码在这里：http://codepen.io/julian-a-avar/pen/xbaRJz

正如预期的那样，一切都与HTML文件相同：

<!doctype html>
<html>
    <head>
        <!-- INFO -->
        <meta charset="UTF-8">
        <meta name="application-name" content="Orion OS">
        <meta name="author" content="Julian Avar Campopiano">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="main.css" type="text/css">

        <!-- JS -->
        <script src="script.js"></script>

        <!-- Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    </head>
    <body>
        <div id="taskbar">
            <div id="start_menu"></div>
            <div id="menu">
                <div class="app app1">W1</div>
                <div class="app app2">W2</div>
            </div>
        </div>

        <div class="window w1">
            <div class="head">
                <div class="title">Window 1</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>

        <div class="window w2">
            <div class="head">
                <div class="title">Window 2</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>
    </body>
</html>

是的，文件名是正确的，我正在使用C9.io

请帮忙，也许我错过了什么。

Answer 1

ReferenceError：$未定义

我认为它发生在您实现拖放功能的 script.js 中。

因此修复脚本的顺序可能会解决问题。

<head>
    <!-- INFO -->
    <meta charset="UTF-8">
    <meta name="application-name" content="Orion OS">
    <meta name="author" content="Julian Avar Campopiano">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- CSS -->
    <link rel="stylesheet" href="main.css" type="text/css">

    <!-- Libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

    <!-- JS -->
    <script src="script.js"></script>
</head>

Answer 2

您在jQuery之前添加了脚本，因此$不存在。

订单很重要。

Answer 3

您应该在加载jquery库后添加脚本。

最好在</body>之前的文件末尾加载脚本。

    <!doctype html>
<html>
    <head>
        <!-- INFO -->
        <meta charset="UTF-8">
        <meta name="application-name" content="Orion OS">
        <meta name="author" content="Julian Avar Campopiano">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="main.css" type="text/css">

        <!-- JS -->
        <script src="script.js"></script>

        <!-- Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    </head>
    <body>
        <div id="taskbar">
            <div id="start_menu"></div>
            <div id="menu">
                <div class="app app1">W1</div>
                <div class="app app2">W2</div>
            </div>
        </div>

        <div class="window w1">
            <div class="head">
                <div class="title">Window 1</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>

        <div class="window w2">
            <div class="head">
                <div class="title">Window 2</div>
                <div class="buttons">
                    <div class="close"></div>
                    <div class="maximize"></div>
                    <div class="minimize"></div>
                </div>
            </div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
                </p>
            </div>
        </div>

        <!-- Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

        <!-- JS -->
        <script src="script.js"></script>

    </body>
</html>

从codepen迁移后代码停止工作

3 个答案: