Bölümümün 4 köşesinin jQuery ile yeniden boyutlandırılabilen tutamaçlarını nasıl yapabilirim?

Question

Her dört köşede de div boyutunu yeniden boyutlandırmak için tutamaçları ile hem sürüklenebilir hem de yeniden boyutlandırılabilir bir div'a tıklamaya çalışıyorum.

Divanın sürüklenmesini ve tutamaçları ekleyebildim ... NASIL ... Divanın yalnızca alt, sağ ve sağ alt köşeleri gerçekten çalışıyor ... üst ve diğer köşeler gösteriliyor hover'da bir ok ... ama div'u yeniden boyutlandırmayacaksın!?!?!

<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

Bu, tutamaçları yerleştirmenin bir yoludur. Açıkça handles eklenmesine gerek yoktur.

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

jQuery resizable handles