Question

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

Answer 1

您需要在代码中添加jquery引用

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 2

如果你在你的小提琴中查看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>

Answer 3

您可以在以下网址找到您的演示页面（按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>

JSFiddle to HTML

3 个答案: