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”

回答

相关问题