Jquery自定義調整大小手柄不起作用

我想要一個類似於以下圖像的可實現對象的句柄。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>

enter image description here