可拖动不起作用

Question

我正在尝试使用我的 html 文件的 header 中包含的脚本来实现可拖动（拖放）图片。我为这个项目准备了 3 个独立的文件； html、css 和 js。但是，当我将它上传到我的本地主机时，可拖动功能根本不起作用，同时它在 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;
}

我还在与 drag-and-drop 功能相同的页面中包含了一些其他动态动画。这可能是问题所在吗？请指教。我对此很陌生。提前谢谢你。

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 is not working

javascript

css

jquery

drag-and-drop

draggable