Jquery自定义调整大小句柄不起作用

我想要一个与下图类似的可实现对象上的句柄

我尝试的代码无法使用自定义句柄

如果包含自定义句柄选项，则重新调整大小根本不起作用

<style>
    .object{
        width: 100px; height: 100px; border: 1px solid black;

}
#myContainer{
    height: 600px;
    border: 2px solid #ccc;
}
.handle{
    height: 10px; width: 10px; background: red;
}
</style>
<script type="text/javascript">
$(function() {
    $("#resizable").resizable({
        handles: { 'all': $('#handle') }
      });
});
</script>

<div id="myContainer">
    <div class="object" id="resizable">
        <div id="handle" class="handle"></div>
    </div>
</div>

.反对{
宽度：100px；高度：100px；边框：1px纯黑；
}
#霉菌容器{
高度：600px；
边框：2个实心#ccc；
}
.处理{
高度：10px；宽度：10px；背景：红色；
}
$（函数（）{
$（“#可调整大小”）。可调整大小({
句柄：{'all'：$（'#句柄'）}
});
});

你看到了吗

---

您可以添加一些代码，将

div的边框更改为虚线边框，并使用八个正方形的背景图像？
我要查找的内容在这里找到
我知道这个插件。事实上，我在寻找我所解释的东西