Question

我正在尝试使用包含在我的html文件标题中的脚本来实现可拖动（拖放）图片。这个项目有3个独立的文件; html，css和js。但是，当我将它上传到我的localhost时，可拖动功能根本不起作用，同时它在Jsfiddle上完美运行。

这是html：

<!DOCTYPE HTML>
<html>
<head>
    <link href="index-05.css" rel="stylesheet">
    <script type="text/javascript" src="index-05.js"></script>

<!--dragonfly animation-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="kinetic-v5.1.0.js"></script>
    <script type="text/javascript" src="tweenmax.min.js"></script>


<!--draggable-->
    <script>
        $(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
        $(".boxthree").draggable({ containment: "parent", scroll: false});
    </script>

</head>


<body>
    <div id="container"></div>

    <div class="containment-wrapper">
        <div class="boxone" class="draggable ui-widget-content"></div>
        <div class="boxtwo" class="draggable ui-widget-content"></div>
        <div class="boxthree"></div>
    </div>

</body>
</html>

这是css：

body {
    margin:0;
    height: 595px;
}
#container{
    /*background-color:rgb(19,163,174);*/
    background-image:url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:595px;
    overflow: hidden;
}
#container .background {
    width: 100px;
    height: 200px;
}
/************************************draggable************************************/
.containment-wrapper {
    background:khaki;
    overflow: hidden;
    padding: 50px;
  }
.boxone {
  width: 100%;
  height: 200px;
  background: papayawhip;
    border-radius:50px;
  margin-bottom: 15px;
}
.boxtwo {
    width: 100px;
    height: 100px;
    border-radius:12px;
    background: darkseagreen;
    margin-bottom: 15px;
    float: left;
}
.boxthree {
    width: 100px;
    height: 100px;
    border-radius:50px;
    background: lightcoral;
    margin-bottom: 15px;
    float: left;
}

我还在拖放功能的同一页面中添加了一些其他动态动画。这可能是问题吗？请指教。我是新手。提前谢谢。

Answer 1

有两个jquery-ui js文件，因为包含jQuery-ui两次会导致各种问题。

   <script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

请移动其中一个。

Draggable无效

1 个答案: