如何使用jQuery使我的div的四个角都具有可调整大小的手柄？

Question

我正在尝试在点击事件中添加一个可拖动和可调整大小的 div，该 div 具有位于所有 4 个角落的调整大小处理程序。

我已经能够使 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>

- DigitalMediaGuy

---

你不能只使用handles选项吗？http://api.jqueryui.com/resizable/#option-handles - j08691

Answer 1

这是设置句柄的方法。不需要显式地附加 handles。

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

请查看jQuery resizable handles

- Jashwant

---

对于角落，您还需要：handles:'all'。使用 ne 等单独的角落。 - Ciro Santilli OurBigBook.com

或许是handles: 'n, e, s, w, se, ne, sw, nw'。 - user1663023