我有一个jquery函数，它允许一个元素可以拖动和调整大小，并且工作得很好。我想给它添加的是设置一个元素可以拖动和调整大小的位置。更具体地说，在我的代码中，我想让我的元素可以在两行(v1和vh）的空格之间拖动。有没有办法做到这一点？感谢任何帮助。提前道谢。
null
$(".box").mouseup(function () {
$(this).find('iframe').fadeIn('slow');
}).mousedown(function () {
$(this).find('iframe').hide();
});
$(function () {
$(".box")
.resizable()
.draggable();
});.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4{
color: white;
font-size: 20px;
text-align:center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
null
draggable()jQueryUI组件有一个containment参数。其中一个签名允许您提供4个坐标，这相当于可拖动元素应该限制到的边界框。
要计算这个值，可以分别检索垂直行和水平行的left和top，减去.box的宽度/高度。试试看：
null
jQuery($ => {
let $box = $('.box');
let $vl = $('.vl');
let $vh = $('.vh');
$box
.resizable()
.draggable({
containment: [
8, // default body padding, amend as necessary
8, // default body padding, amend as necessary
Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),
Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
]
});
});.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 90%;
overflow: hidden;
}
.vh {
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 95%;
overflow: hidden;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
<h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>
一种方法是将盒子包装在一个适合您想要的区域的容器中，并使用containment：“parent”
null
function getContainerDimensions() {
const buffer = 6 // used in demo to prevent borders overlap
return {
width: $('.vl').offset().left - buffer,
height: $('.vh').offset().top - buffer
}
}
$(function() {
const $cont = $('<div id="container">').css(getContainerDimensions())
$(".box").wrap($cont)
.resizable({containment: "parent"})
.draggable({containment: "parent"});
});body {
padding: 0;
margin: 0
}
#container {
border: 2px solid green
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>