如何讓我的div的所有4個角落的可調整大小與jQuery處理？

我想附加一個div onClick，它既可拖動也可調整大小，並帶有調整該div在所有4個角的大小。如何讓我的div的所有4個角落的可調整大小與jQuery處理？

我已經能夠使div可拖動並添加手柄......但是......只有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>

來源

2012-10-09 DigitalMediaGuy

你就不能使用手柄選項？ http://api.jqueryui.com/resizable/#option-handles – j08691

這是把柄的方法。沒有必要明確附加handles。

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

見jQuery resizable handles

來源

2012-10-09 20:58:35 Jashwant

謝謝！這很好用 – DigitalMediaGuy

如果我的答案可以幫助你，請將它標記爲答案:) – Jashwant

而且對於角落，你還需要：'句柄：'all''。帶'ne'的個別角落等 –

如何讓我的div的所有4個角落的可調整大小與jQuery處理？

回答

相關問題