2015-10-12 64 views
0

因此,這是有史以來最古怪的事情。我正在開發一個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> 

是,文件名是正確的,我'm使用C9.io

請幫忙,也許我失去了一些東西。

回答

2

ReferenceError: $ is not defined

我計算過,它發生在你的的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> 
1

您在jQuery之前包含腳本,因此$不存在。

訂單事宜。

1

您應該在加載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>