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

您可以对 "contain" 可拖动项目使用包装器。

$('#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>

Jquery UI 可拖动元素可以被拖动超过所需的宽度

Jquery UI draggable element can be dragged past the desired width

javascript

css

jquery

jquery-ui