下午好!我有两个具有可拖动功能的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/

10-12 12:38
查看更多