Question

我做错了什么？ Javascript无法正常工作。有jsfiddle的链接，它在那里工作得很好：http://jsfiddle.net/onazdce2/。

我想以某种方式将其重写到我的程序中，但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;
}

Answer 1

解决：我必须在head标签中有两个脚本引用。谢谢大家的建议。

<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>

Answer 2

我认为您没有在代码中添加Jquery UI脚本引用在头标记中添加以下脚本希望它能够正常工作

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

在添加此内容之后，根据小提琴，一切都正常。

Javascript无法加载

2 个答案: