为什么我的拖车不工作?

时间:2014-08-29 15:44:15

标签: jquery-ui

我知道拖拽是有效的,因为我可以在jsfiddle示例上做到这一点,但我显然没有做正确的事情。我在下面添加了html,css和js,但仍然无法在chrome中拖动div。所有帮助表示赞赏。

html

<!DOCTYPE html>
<html>
        <head>
        <title>test</title>
        <link rel='stylesheet' href='drag.css'></link>
        <script src='drag.js'></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <div id="car">
            <div id="top"></div>
            <div id="bottom"></div>
            <div id="fwheel"></div>
            <div id="bwheel"></div>
        </div>   
    </body>
</html>

drag.cs​​s

#top {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    background-color: #cc0000;
    left: 25px;
}
#bottom {
    position: relative;
    height:25px;
    width: 100px;
    background-color: #cc0000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    top: -25px;
}
#fwheel {
    position: relative;
    height:20px;
    width:20px;
    border-radius: 100%;
    background-color: black;
    top: -35px;
    left: 5px;
}
#bwheel {
    position: relative;
    height:20px;
    width:20px;
    border-radius: 100%;
    background-color: black;
    top: -55px;
    left: 75px;
}

drag.js

$(document).ready(function() {
    $('#car').draggable();
});

0 个答案:

没有答案