【发布时间】：2014-11-10 04:45:32
【问题描述】：
我是 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>
【问题讨论】：
-
您是使用 HTML 页面的样式表还是使用页内样式？错误地阅读了这个问题：/我的错
-
将样式包装在样式标签中
-
您上面粘贴的代码是您放入 HTML 文件中的代码吗？如果是这样，那就有很多错误了……缺少、
-
要调试此类错误，请转到浏览器的检查器，并检查控制台选项卡，它会为您提供一些不顺利的帮助。
-
这只是一个草稿。我没有在这里添加 head 和 style 标签。但是在主 html 文件中添加了它们。
标签： javascript jquery html css