Javascript/JQuery 使用 div/"grippie" 调整文本区域的大小答案

【问题标题】：Javascript/JQuery resize textarea with div/"grippie"Javascript/JQuery 使用 div/"grippie" 调整文本区域的大小
【发布时间】：2016-10-10 17:05:45
【问题描述】：

我看过很多东西，包括如何制作一个调整textarea 大小的“grippie”，并尝试了所有代码，但没有一个起作用。有什么帮助吗？当您提出问题或发布答案时，我试图让它像 Stack Overflow 上的一样。

【问题讨论】：

标签： javascript jquery resize textarea resizegrip

【解决方案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;
}

【讨论】：

【解决方案2】：

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').on('dragstart', function(evt) {

})

如果用户点击的是顶层而不是手柄 setfocus 在 textarea 上

【讨论】：

但是我会使用什么代码来调整textarea的大小？
我不明白你所说的堆叠是什么意思。我知道z-index 是什么以及如何使用它，但我为什么需要呢？
您需要将鼠标悬停在您的文本区域上。您可以将它悬停在空白区域中的文本区域上，因为无论窗口大小调整或滚动，它都不会停留在原位。用 javascript 控制它是一场噩梦。实现这一点的最简单方法是将两个大小相同的层堆叠在每个层的顶部。抓斗将绝对位于顶层内部。底层调整大小并与顶层一起移动。抓斗保持其在顶层内的位置。
我不明白。