JSFiddle到HTML
我是javascript和jquery方面的新手。我有一个条形图可以滑动的代码，它在jsfiddle上工作得很好；但是，当我尝试运行作为HTML文件时，它不起作用。我不知道我在这里遗漏了什么，也不知道需要做些什么才能让这段代码工作。请让我知道哪些库文件，我将必须包括在代码中的条状幻灯片在HTML。
jsfiddle上我的代码的链接是：http://jsfiddle.net/sgx9L8sx/
任何帮助都将不胜感激。
提前谢谢。
`.box {
width:40px;
height:10px;
background:blue;
}
.box1 {
width:25px;
height:10px;
position:relative;
top:40px;
left:40px;
background:black;
}
.result{
position:fixed;
top:20px;
}
.result1{
position:fixed;
top:70px;
}
<script>
$(".box").draggable({
axis: "x",
drag: function(event, ui) {
var y2 = ui.position.top;
var x2 = ui.position.left;
if (reverting){
event.preventDefault();
event.stopImmediatePropagation();
} else if (x2 > 100) {
reverting = true;
revertDrag($('.box'));
}
else if (x2<0) {
}
}
});
function revertDrag(element){
element.draggable('disable');
element.animate({
top: 0,
}, {
duration: 500,
complete: function() {
reverting = true;
element.draggable('enable');
}
})
}
$(".box1").draggable({
axis: "x",
drag: function(event, ui) {
var y3 = ui.position.top;
var x3 = ui.position.left;
if (reverting1){
event.preventDefault();
event.stopImmediatePropagation();
} else if (x3 > 200) {
reverting1 = true;
revertDrag1($('.box1'));
alert("this is incorrect");
}
else if (x3<40) {
alert("Wrong submission");
revertDrag2($('.box1'));
}
}
});
function revertDrag1(element){
element.draggable('disable');
element.animate({
top:40,
}, {
duration: 500,
complete: function() {
reverting1 = false;
element.draggable('enable');
}
})
}
function revertDrag2(element){
element.draggable('disable');
element.animate({
top:40,
left:70,
}, {
duration: 500,
complete: function() {
reverting1 = true;
element.draggable('enable');
}
})
}
</script>
<body>
<div class="box">
</div>
<div class="result">
</div>
<div class="box1">
<div class="result1">
</div>
</div>
</body>回答 4
Stack Overflow用户
发布于 2014-09-16 12:27:19
您需要在代码中添加jquery重构。
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>Stack Overflow用户
发布于 2014-09-16 12:27:46
如果您在小提琴中查看Framework and Extensions，您将看到您的基础库是jQuery 1.10.1，然后您就包含了jQueryUI 1.10.3，这是一个JS和一个CSS文件。
CSS可以包括在任何时候，但最好是在您的JS之前。JS顺序很重要，jQuery包括在jQueryUI之前。
所以在HTML中是这样的：
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>Stack Overflow用户
发布于 2014-09-16 12:39:21
您可以在下面的url找到演示页面(按CTRL+U查看源代码)：
http://fiddle.jshell.net/sgx9L8sx/show/
例如，在标题上设置的内容如下：
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>
.box {
width:20px;
height:10px;
background:blue;
}
.box1 {
width:20px;
height:10px;
position:relative;
top:40px;
background:black;
}
.result {
position:fixed;
top:20px;
}
.result1 {
position:fixed;
top:70px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>https://stackoverflow.com/questions/25868691
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号