Question

现在我正在学习jQuery UI，但是我无法拖动我用HTML和CSS创建的框。我正在使用HTML5和CSS3与jQuery版本1.12.1。任何帮助/建议都会非常有帮助。提前谢谢。

HTML代码：

    <head>
        <title>jQueryUI Draggable</title>

        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="styles.css">

        <!--JqueryUI CSS-->
        <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css">

    </head>

    <body>

        <div class="container">
            <h1>jQueryUI Draggable</h1>

            <div id="box1" class="box">Box 1</div>
            <div id="box2" class="box">Box 2</div>
            <div id="box3" class="box">Box 3</div>
            <div id="box4" class="box">Box 4</div>
        </div>

        <!--If CDN Fails to load, serve up the local version-->
        <script src="js/jquery-3.2.0.min.js"></script>

        <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>

        <script src="script.js"></script>

    </body>

</html>

normalize CSS文件是默认版本HTML的简单文件：

.box{
    height:200px;
    width:200px;
    display:inline-block;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    color:white;
    margin:0 20px;
}

#box1{
    background:lightblue;
}

#box2{
    background:lightgreen;
}

#box3{
    background:purple;
}

#box4{
    background:black;
}

.box:hover{
    cursor:pointer;
}

jQuery UI代码：

$(function(){
    $('.box').draggable();
});

Answer 1

＆＃13;

 $('.box').draggable();

＆＃13;

.box{
    height:200px;
    width:200px;
    display:inline-block;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    color:white;
    margin:0 20px;
}

#box1{
    background:lightblue;
}

#box2{
    background:lightgreen;
}

#box3{
    background:purple;
}

#box4{
    background:black;
}

.box:hover{
    cursor:pointer;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

 <div class="container">
            <h1>jQueryUI Draggable</h1>

            <div id="box1" class="box">Box 1</div>
            <div id="box2" class="box">Box 2</div>
            <div id="box3" class="box">Box 3</div>
            <div id="box4" class="box">Box 4</div>
</div>

＆＃13;

jQuery UI可拖动无法使用jQueryUI 1.12.1

1 个答案: