Javascript/JQuery調整文本區域與div /「grippie」

我已經看過很多東西，涵蓋如何使一個「grippie」調整textarea的大小，並嘗試了所有的代碼，但都沒有工作。任何幫助？當你提出問題或發佈答案時，我試圖讓它像堆棧溢出一樣。Javascript/JQuery調整文本區域與div /「grippie」

來源

2016-06-09 Teacher of Things

我發現如何做到這一點！ Here是該項目的小提琴。我會繼續更新它並使其更好！

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

來源

2016-06-09 23:01:49

Controlling Stacking on Webpage
你有兩個div

<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的

$（ '＃grippie'）。在（ '的dragstart'，函數（EVT）{

}）

如果用戶單擊textarea上的頂層而不是grippie setfocus

來源

2016-06-09 21:33:20

但我會用什麼樣的代碼來調整'textarea'？ –

我不明白你的意思。我知道'z-index'是什麼以及如何使用它，但爲什麼我需要？ –

你需要grippie將鼠標懸停在textarea上。您可以將它懸停在空白區域的textarea上，因爲窗口大小調整或滾動時不會保持原位。用javascript控制它會是一場噩夢。最簡單的方法是在每個頂部堆疊兩個同樣大小的層。 grippie將絕對定位在頂層內。底層調整大小並隨頂層一起移動。 grippie維持它在頂層內的位置。 – 2016-06-09 22:05:49

Javascript/JQuery調整文本區域與div /「grippie」

回答

相關問題