Javascript 设置元素可拖动的位置

我有一个jquery函数，它允许元素可以拖动和调整大小，并且运行良好。我想添加的是设置一个位置，在这个位置上元素可以拖动并调整大小。更具体地说，我想让我的元素在代码中的两行空间（v1和vh）之间拖动。有没有办法做到这一点？感谢您的帮助。提前谢谢

$（“.box”）.mouseup（函数（）{
$（this.find（'iframe'）.fadeIn（'slow'）；
}).mousedown（函数（）{
$（this.find（'iframe'）.hide（）；
});
$（函数（）{
$（“.box”）
.可调整大小（）
.draggable（）；
});
.box{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：32%；
身高：30%；
背景色：#2b2d2f；
颜色：黑色；
位置：绝对位置；
最高：1%；
}
.信箱h4{
颜色：白色；
字体大小：20px；
文本对齐：居中；
}
.vl{
身高：100%；
位置：绝对位置；
右：5%；
排名：0；
背景色：红色；
宽度：2.5px；
身高：100%；
溢出：隐藏；
}
.vh{
宽度：100%；
位置：绝对位置；
最高：75%；
背景色：红色；
高度：2.5px；
宽度：100%；
溢出：隐藏；
}

箱
该
draggable（）
jQueryUI组件有一个
containment
参数。其中一个签名允许您提供4个坐标，这相当于可拖动元素应限制的边界框

要计算此值，您可以分别检索垂直线和水平线的
左侧
和
顶部
，减去
框的宽度/高度。试试这个：


jQuery（$=>{
设$box=$（'.box'）；
设$vl=$（'.vl'）；
设$vh=$（'.vh'）；
美元箱
.可调整大小（）
.拖拉({
遏制：[
8，//默认车身衬垫，根据需要进行修改
8，//默认车身衬垫，根据需要进行修改
Math.ceil（parseFloat（$vl.css（'left'））-Math.floor（parseFloat（$box.width（）），
Math.ceil（parseFloat（$vh.css（'top'））-Math.floor（parseFloat（$box.height（）））
]
});
});
.box{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：32%；
身高：30%；
背景色：#2b2d2f；
颜色：黑色；
位置：绝对位置；
最高：1%；
}
.信箱h4{
颜色：白色；
字体大小：20px；
文本对齐：居中；
}
.vl{
身高：100%；
位置：绝对位置；
右：5%；
排名：0；
背景色：红色；
宽度：2.5px；
身高：90%；
溢出：隐藏；
}
.vh{
位置：绝对位置；
最高：75%；
背景色：红色；
高度：2.5px；
宽度：95%；
溢出：隐藏；
}

箱
一种方法是将盒子包装在适合您所需区域的容器中，并使用
容器：“家长”


函数getContainerDimensions（）{
const buffer=6//在演示中用于防止边界重叠
返回{
宽度：$（'.vl'）.offset（）.left-缓冲区，
高度：$（'.vh'）。偏移量（）。顶部-缓冲区
}
}
$（函数（）{
常量$cont=$（''）.css（getContainerDimensions（））
$（“.box”）.wrap（$cont）
.可调整大小（{containment:“parent”}）
.draggable（{containment:“parent”}）；
});
正文{
填充：0；
保证金：0
}
#容器{
边框：2件纯绿
}
.盒子{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：32%；
身高：30%；
背景色：#2b2d2f；
颜色：黑色；
位置：绝对位置；
最高：1%；
}
.信箱h4{
颜色：白色；
字体大小：20px；
文本对齐：居中；
}
.vl{
身高：100%；
位置：绝对位置；
右：5%；
排名：0；
背景色：红色；
宽度：2.5px；
身高：100%；
溢出：隐藏；
}
.vh{
宽度：100%；
位置：绝对位置；
最高：75%；
背景色：红色；
高度：2.5px；
宽度：100%；
溢出：隐藏；
}

箱
但是在调整长方体元素的大小后，它将不再被包含？@Rory McCrossanIf这是一项要求，每次调整长方体的大小时，您都需要更新
包含
设置。