Javascript jQueryUI：如何使可拖动的div可调整大小

我正在尝试使用jquery使我的可拖动div元素也可以调整大小- ui

resizeable（）

方法

由于某种原因，虽然我可以拖动它，但它不允许我调整它的大小

$（'.resize'）。可调整大小({
网格：[1，1]
});
$（'.dragThis'）。可拖动({
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'）.text（'x:'+xPos）；
$（'#posY'）.text（'y:'+yPos）；
}
});
.dragThis{
位置：绝对位置；
顶部：100px；
左：100px；
溢出：可见；
宽度：150px；
高度：150像素；
背景重复：无重复；
背景位置：中心；
背景图像：url（'https://image.flaticon.com/icons/png/128/148/148836.png');
}
#轮廓{
位置：绝对位置；
边框：1px黑色虚线；
边界半径：50%；
宽度：150px；
高度：150像素；
-webkit动画：旋转10秒线性无限；
位置：绝对位置；
z指数：30000；
转换：翻译（-50%，-50%）；
}





因此，可调整大小的函数正确地添加了调整大小句柄，但问题是它们的高度为零像素，因为您没有包括jQuery UI CSS样式表，该样式表为您设置了调整大小句柄的样式

您可以自己添加一些CSS，也可以选择所需的样式表

在下面的代码片段中，我在右侧添加了一个大的灰色句柄，您可以拖动它来调整大小，作为添加自己的CSS的示例


$（'.dragThis'）。可拖动({
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'）.text（'x:'+xPos）；
$（'#posY'）.text（'y:'+yPos）；
}
});
$（'.resize'）。可调整大小({
网格：[1,1]，
句柄：“e”
});
.dragThis{
位置：绝对位置；
顶部：100px；
左：100px；
溢出：可见；
宽度：150px；
高度：150像素；
背景重复：无重复；
背景位置：中心；
背景图像：url（'https://image.flaticon.com/icons/png/128/148/148836.png');
}
#轮廓{
位置：绝对位置；
边框：1px黑色虚线；
边界半径：50%；
宽度：150px；
高度：150像素；
-webkit动画：旋转10秒线性无限；
位置：绝对位置；
z指数：30000；
转换：翻译（-50%，-50%）；
}
.ui可调整大小的句柄{
宽度：15px；
身高：100%；
显示：块；
背景颜色：灰色；
位置：绝对位置；
右：0；
排名：0；
光标：ew调整大小；
}