Làm thế nào tôi có thể làm cho tất cả 4 góc của div của tôi có thể điều chỉnh kích thước bằng jQuery?

Question

Tôi đang cố nối thêm một div onClick có thể kéo và có thể thay đổi kích cỡ bằng các chốt để thay đổi kích thước div đó ở tất cả 4 góc.

Tôi đã có thể làm cho div có thể kéo và thêm tay cầm ... HOWEVER ... Chỉ các góc dưới, bên phải và dưới cùng bên phải của div thực sự hoạt động ... các góc trên cùng và các góc khác hiển thị một mũi tên trên di chuột ... nhưng sẽ không thay đổi kích thước 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

Đây là cách để đặt tay cầm. Không cần phải nối thêm handles một cách rõ ràng.

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

Xem jQuery resizable handles