我想创建一个可拖动的div,它位于一个更大的div中。 这是我的计划。但它不起作用。 我想可拖动的功能是使用一个div可拖动的功能。 我还要使用哪个版本? 1.7.2还是1.3.2?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">
#draggable {
background-color:blue;
width: 150px;
height: 150px;
padding: 0.5em;
}
</style>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable">
<p>hai</p>
</div>
</body>
</html>
答案 0 :(得分:1)
我尝试修改您的代码并在此处生成一个有效的示例:http://jsfiddle.net/mUa3r/
基本上要让你的盒子可以拖动并被容器绑定,使用{containment: parent}
,如here所述。
更新:(因为链接不适合你)
<强>脚本:强>
<script>
$(function() {
$("#draggable").draggable({containment: "parent" });
});
</script>
<强> HTML:强>
<div id="container">
<div id="draggable">
<p>hai</p>
</div>
</div>
<强> CSS:强>
#container {background-color:grey; width: 300px; height: 300px;}
#draggable {background-color:blue; width: 150px; height: 150px; padding: 0.5em;}
希望这有帮助!
答案 1 :(得分:0)
我调查你的javascript应该如下;
<script type="text/javascript">
$(document).ready(function () {
$("#draggable").draggable();
});
</script>
希望这有帮助