[英]Javascript/JQuery resize textarea with div/“grippie”
我已经看过许多有关如何制作可调整textarea
大小的“ grippie”的内容,并且尝试了所有代码,但均未成功。 有什么帮助吗? 当您提出问题或发布答案时,我正在尝试使其像Stack Overflow上的那样。
我发现了怎么做! 这是该项目的摆弄。 我将继续更新并使其更好!
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;
}
控制网页上的堆叠
你有两个股利
<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){
})
如果用户单击顶层,而不是单击饼图,则将焦点设置在文本区域上
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.