¿Cómo puedo hacer que las 4 esquinas de mi div tengan asas redimensionables con jQuery?

Question

Estoy tratando de agregar un div en Click que se puede arrastrar y cambiar de tamaño con identificadores para cambiar el tamaño de ese div en las 4 esquinas.

He podido hacer que div se pueda arrastrar y agregar los controladores ... SIN EMBARGO ... Solo las esquinas inferior, derecha e inferior derecha del div funcionan realmente ... la parte superior y otras esquinas muestran una flecha en el aire ... pero no cambiará el tamaño del 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

Esta es la forma de colocar los mangos. No es necesario agregar handles explícitamente.

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

Ver jQuery resizable handles