Jquery UI 可拖动元素可以拖动到所需宽度之外

Question

我有两个具有可拖动功能的div，但我想知道，有什么方法可以锁定它们，使其无法向右和向下拖动？这是每个可拖动div 的 css 和 js：

#the-sheet {
position: absolute;
margin-left: auto;
margin-right: auto;
border-radius: 25px;
top: 200px;
left: 250px;
right: 250px;
height: 400px;
width: 1000px;
background-color: #FFFAFA; 
font-family: 'Open Sans', sans-serif;
border: 1px solid red;  
}
#second-sheet {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 250px; 
right: 250px;
border-radius: 25px;
top: 650px;
height: 500px;
width: 1000px;
background-color: #FFFAFA; 
font-family: 'Open Sans', sans-serif;
border: 1px solid red;
}

和 JS：

$('#the-sheet, #second-sheet').draggable( {
appendTo: "body",
scrollSpeed: 600,
snap: false,
});

我想要的是能够将它们拖动到一定量，但它们可以向右拖动，从而扩大宽度，并拖动超过我想要的宽度。

Answer 1

您可以使用包装器来"包含"可拖动的项目。

$('#the-sheet, #second-sheet').draggable( {
appendTo: "body",
scrollSpeed: 600,
snap: false,
containment: "#containment-wrapper"
});

显示行为的示例代码段 -

$(document).ready(function() {
$( ".box" ).draggable({ containment: "#containment-wrapper" })
})

.box{

left:50px;
top:50px;
width: 150px;
height: 150px;
background: red
}
#containment-wrapper{
width:300px;
height:300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="containment-wrapper">
<div class="box"></div>
</div>