下午好!我有两个具有可拖动功能的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,
});
我想要的是能够将它们拖动到一定程度,但是可以将它们拖动到右侧,从而扩大宽度,并拖动到我想要的宽度之外。先感谢您。
最佳答案
您可以使用包装器“包含”可拖动的项目。
$('#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>
关于javascript - jQuery UI的可拖动元素可以被拖动超过所需的宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59795524/