Javascript無法加載

我在做什麼錯？ Javascript不起作用。有鏈接到jsfiddle那裏它是完美的工作：http://jsfiddle.net/onazdce2/。Javascript無法加載

我想重寫它到我的程序，但js似乎沒有加載。

HTML：

<!DOCTYPE html> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Drag & Drop rubriky</title> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 

<body> 
    <div id="launchPad">  
      <div class="card">apple</div> 
      <div class="card">orange</div> 
      <div class="card">banana</div> 
      <div class="card">car</div> 
      <div class="card">bus</div> 
    </div> 

    <div id="dropZone"> 
      <div class="stack"> 
       <div class="stackHdr">title 1 here </div> 
       <div class="stackDrop1"></div> 
      </div> 

      <div class="stack"> 
       <div class="stackHdr">title 2 here</div> 
       <div class="stackDrop2"></div> 
      </div> 
    </div> 
    <script src="script.js"></script> 
</body> 
</html>

JS：

// JavaScript Document 
$("#launchPad").height($(window).height() - 20); 
var dropSpace = $(window).width() - $("#launchPad").width(); 
$("#dropZone").width(dropSpace - 10); 
$("#dropZone").height($("#launchPad").height()); 

$(".card").draggable({ 
    appendTo: "body", 
    cursor: "move", 
    helper: 'clone', 
    revert: "invalid", 
}); 

$("#launchPad").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $("#launchPad").append($(ui.draggable)); 
    } 
}); 

$(".stackDrop1").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) {   
     $(this).append($(ui.draggable)); 

    } 
}); 

$(".stackDrop2").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) {   
     $(this).append($(ui.draggable)); 
    } 
});

CSS：

/* CSS Document */ 
body { 
    margin: 0; 
} 
#launchPad { 
    float:left; 
    border: 1px solid #eaeaea; 
    background-color: #f5f5f5; 
} 
#dropZone { 
    float:right; 
    border: 1px solid #eaeaea; 
    background-color: #ffffcc; 
} 
.card { 
    width: 150px; 
    padding: 5px 10px; 
    margin:5px; 
    border:1px solid #ccc; 
    background-color: #eaeaea; 
} 
.stack { 
    width: 180px; 
    border: 1px solid #ccc; 
    background-color: #f5f5f5; 
    margin: 20px; 
} 
.stackHdr { 
    background-color: #eaeaea; 
    border: 1px solid #fff; 
    padding: 5px 
} 
.stackDrop1, .stackDrop2 { 
    min-height:100px; 
    padding: 15px; 
} 
.stack .card.ui-draggable{ 
    background-color:orange; 
    height:150px; 
}

來源

2016-10-01 Honzík Azjol Havelka

請正確指定問題; –

你能告訴我們你的控制檯的截圖嗎？ – Fralec

你檢查了瀏覽器的控制檯嗎？有沒有錯誤？ – webNeat

解決：我必須在頭標記中同時具有腳本引用。感謝大家的建議。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

來源

2016-10-01 18:18:39

我想你沒有在你的代碼添加了jQuery UI的腳本引用添加下面的腳本在你的頭標籤希望它能工作

<script src="http://code.jquery.com/ui/1.12.0/jquery- 
ui.min.js"integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="  
crossorigin="anonymous"></script>

一切工作正常，根據小提琴後添加此。

來源

2016-10-01 17:48:11

我已經嘗試了很多組合：使用兩個腳本引用或只使用一個腳本引用，但仍然無效:( –

Javascript無法加載

回答

相關問題