javascript - 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>