Javascript/JQuery изменить размер textarea с div/«grippie»

Question

Я смотрю на многие вещи, рассказывая, как сделать «grippie», который изменяет размер textarea и пробовал весь код, но ни один из них не работал. Любая помощь? Я пытаюсь сделать его похожим на тот, что на Stack Overflow, когда вы задаете вопрос или отправляете ответ.

Answer 1

Я узнал, как это сделать! 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; 
} 

Answer 2

Controlling Stacking on Webpage
У вас есть две дивы

<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', функция (ЭВТ) {

})

Если пользователь нажимает на верхний слой, а не на gripie setfocus на текстовом поле