可拖动不起作用
Posted
技术标签:
【中文标题】可拖动不起作用【英文标题】：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
【参考方案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>
请移动其中一个。
【讨论】：
以上是关于可拖动不起作用的主要内容，如果未能解决你的问题，请参考以下文章