Javascript / JQuery使用div /“ grippie”調整文本區域的大小

Question

我已經看過許多有關如何制作可調整textarea大小的“ grippie”的內容，並且嘗試了所有代碼，但均未成功。 有什么幫助嗎？ 當您提出問題或發布答案時，我正在嘗試使其像Stack Overflow上的那樣。

Answer 1

我發現了怎么做！ 這是該項目的擺弄。 我將繼續更新並使其更好！

HTML

<textarea id="textarea"></textarea>
<div id="grippie" draggable="false"></div>

QJuery / JavaScript的

var resize = false;
$('#textarea').hover(function(e){
    e.preventDefault();
    resize = false;
});
$('#grippie').mousemove(function(e){
    if(resize == true){
      $('#textarea').height(e.pageY-18);
   }
});
$('#grippie').mousedown(function(e){
    resize = false;
   resize = true;
});
$(window).mouseup(function(e){
   resize = false;
});

CSS

#textarea {
   padding: 2px;
   width: 400px;
   height: 200px;
   min-height: 50px;
   overflow: auto;
   resize: none;
}
#grippie {
   display: block;
   width: 404px;
   height: 5px;
   background-color: #CCC;
   border: 1px solid #888;
   cursor: s-resize;
}

Answer 2

控制網頁上的堆疊
你有兩個股利

<div id="div1" class="bottom-layer"><textarea></textarea></div>
<div id="div2" class="top-layer"><img id="grippie" src="grippie.png"  draggable="true"  class="grippie-thingy"/></div>

使用ondragstart連接抓拍

$（'＃grippie'）。on（'dragstart'，function（evt）{

}）

如果用戶單擊頂層，而不是單擊餅圖，則將焦點設置在文本區域上