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'
    }); 

See jQuery resizable handles

Share:
12,733
DigitalMediaGuy
Author by

DigitalMediaGuy

Web Developer Skills: PHP jQuery HTML CSS MYSQL Joomla CMS

Updated on June 12, 2022

Comments

  • DigitalMediaGuy
    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>