Come posso fare in modo che tutti i 4 angoli del mio div abbiano maniglie ridimensionabili con jQuery?

Question

Sto provando ad aggiungere un div onClick che è sia trascinabile che ridimensionabile con le maniglie per ridimensionare quel div in tutti e 4 gli angoli.

Sono stato in grado di rendere il div trascinabile e aggiungere le maniglie ... TUTTAVIA ... Solo gli angoli inferiore, destro e inferiore destro del div funzionano effettivamente ... la parte superiore e gli altri angoli mostrano una freccia su hover ... ma non ridimensionerà il div!?!?!

<script> 

$(document).ready(function() { 

    //onClick append a resizable & draggable div with handles on all 4 corners 
    $('#mega_wrap').click(function(e){ 

     //Define element css and positioning then add both draggable and resizable from jQuery UI 
     var ele = $("<div>"); 
      ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50}); 
      ele.draggable(); 
      ele.resizable(); 

     //Define elements handles and append them to the new div 
     var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>"); 
     var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>"); 
     var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>"); 
     var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>"); 

      eleHandleNE.appendTo(ele); 
      eleHandleSE.appendTo(ele); 
      eleHandleSW.appendTo(ele); 
      eleHandleNW.appendTo(ele); 

     //Append new div to the container div called mega_wrap 
     $("#mega_wrap").append(ele); 

    }); 
}); 

</script> 

<div id="mega_wrap"> 
    <form class="form-wrapper cf"> 
      <input type="text" placeholder="Looking for inspiration..." required> 
      <button type="submit">Search</button> 
    </form> 
</div> 

Answer 1

Questo è il modo per inserire le maniglie. Non è necessario aggiungere handles in modo esplicito.

ele.resizable({ 
     handles: 'n, e, s, w' 
    }); 

Vedi jQuery resizable handles