可拖动不起作用答案

【问题标题】：Draggable is not working可拖动不起作用
【发布时间】：2015-08-03 22:32:38
【问题描述】：

我正在尝试使用包含在我的 html 文件标题中的脚本来实现可拖动（拖放）图片。我有这个项目的 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;
}

我还在同一页面中添加了一些其他动态动画作为拖放功能。这可能是问题吗？请指教。我对此很陌生。提前谢谢你。

【问题讨论】：

您有多个对 jQuery UI 的引用。使用整体或定制。还将您的 jQuery 代码包装在文档就绪处理程序中
你是说这个？：
是的，删除它。或者下面这个/1.11.4/jquery-ui.min.js
啊啊啊啊啊啊啊啊啊啊啊！我包装了jquery！谢谢！我现在觉得很傻。非常感谢你：D

标签： javascript jquery css drag-and-drop draggable

【解决方案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>

请移动其中一个。

【讨论】：