我做错了什么？ 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;
}
最佳答案
我认为您没有在代码中添加 Jquery UI 脚本引用，请在 head 标记中添加以下脚本希望它能起作用
<script src="http://code.jquery.com/ui/1.12.0/jquery-
ui.min.js"integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
添加此后，根据 fiddle ，一切正常。
关于JavaScript 无法加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39809630/