मैं अपने div के सभी 4 कोनों को jQuery के साथ आकार बदलने योग्य हैंडल कैसे बना सकता हूं?

Question

मैं एक div पर क्लिक करने की कोशिश कर रहा हूं क्लिक करें जो सभी 4 कोनों में उस div को आकार देने के लिए हैंडल के साथ खींचने योग्य और आकार बदलने योग्य दोनों हैं।

मैं div draggable बनाने और हैंडल जोड़ने में सक्षम हूं ... फिर भी ... div के केवल नीचे, दाएं, और नीचे-दाएं कोने वास्तव में काम करते हैं ... शीर्ष और अन्य कोनों का शो होवर पर एक तीर ... लेकिन 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

यह हैंडल रखने का तरीका है। handles को स्पष्ट रूप से जोड़ने की आवश्यकता नहीं है।

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

देखें jQuery resizable handles