我想在我的可移动的div里面制作一个div，它就像一个可以容纳内容并且与可拖动的div具有相同宽度的窗口。完全像你的计算机上的程序工作/看起来像（顶部的栏是可拖动的，但如果你试图在应用程序中拖动内容它将无法工作）。
到目前为止，这是我的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#divcontainer {
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove {
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
cursor: move;
}
</style>
<script>
$(document).ready(function () {
$("#makeitmove").draggable({containment: "#divcontainer", scroll: false});
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">Calculator
</div>
</div>
</body>
</html>如果您也为我禁用了主页面上的滚动条（但不是窗口），是否可以，不太确定如何做到这一点？非常感谢您的帮助！
您需要使用draggable的handle选项来指定要启用拖动的位置。
了解更多信息https://jqueryui.com/draggable/#handle
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#divcontainer {
border: 1px solid lightgray;
width: 100%
height: 100%
}
#makeitmove {
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
}
#drag {
height: 20px;
width: 100%;
background: blue;
}
</style>
<script>
$(document).ready(function () {
$("#makeitmove").draggable({containment: "#divcontainer", handle: '#drag', scroll: false});
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">
<div id="drag"></div>
Calculator
</div>
</div>
</body>
</html>你去！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html, body{
height:100%;
margin:0;
}
#divcontainer{
border: 1px solid lightgray;
box-sizing: border-box;
}
#makeitmove{
background: white;
resize: both;
overflow: auto;
text-align: center;
width: 500px;
height: 76px;
border: 1px solid grey;
}
#handle {
background: lightgray;
height: 20px;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", handle: "#handle", scroll: false} );
});
</script>
<div id="window" style="display: none;"></div>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">
<div id="handle"></div>
<span>Calculator</span>
</div>
</div>
</body>
</html>