How can I make all 4 corners of my div have resizable handles with jQuery?
12,733
This is the way to put handles. There is no need to append handles
explicitly.
ele.resizable({
handles: 'n, e, s, w'
});
Author by
DigitalMediaGuy
Web Developer Skills: PHP jQuery HTML CSS MYSQL Joomla CMS
Updated on June 12, 2022Comments
-
DigitalMediaGuy almost 2 years
I am trying to append a div onClick that is both draggable and resizable with handles for resizing that div being in all 4 corners.
I have been able to make the div draggable and add the handles... HOWEVER... Only the bottom, right, and bottom-right-corners of the div actually work... the top and other corners show an arrow on hover... but won't resize the 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>