如何使用jQuery UI插件使html文本框可拖动和调整大小?
16lz
2021-01-22
Using jquery ui draggable
plugin, I've made html text box draggable in this way:
使用jquery ui draggable插件,我已经以这种方式使html文本框可拖动:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#Text1").draggable({
containment: "parent",
cancel: null
});
});
</script>
<form id="form1" runat="server">
<div>
<div id="dialog" title="Dialog Box" style="border: solid 1px black;">
<input id="Text1" type="text" style="width: 200px; height: 20px;" value="Text1" />
</div>
</div>
</form>
But, how to make it resizable using jQuery as well?
但是,如何使用jQuery使其可调整大小?
Thank you in advance.
先谢谢你。
Goran
2 个解决方案
#1
4
Here is the DEMO to make the HTML textbox resizable
and draggable
using jquery-ui
这是使用jquery-ui使HTML文本框可调整大小和可拖动的演示
HTML:
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<span id="draggable">*
<input type="text "id="resizable" class="ui-state-active" value="This is input box">
</span>
</div>
JS:
$(function() {
$( "#resizable" ).resizable({
containment: "#container"
});
$( "#draggable" ).draggable({containment: "#container"});
});
更多相关文章
- jQuery UI对话框调整大小关闭按钮
- 如何使用jQuery增加字体大小的变化?
- 使用jQuery从一个.NET网格拖动并拖放到另一个gridview单元格
- 打开后,JQuery ui对话框调整大小
- Html5如何使我们开发出来的应用或页面大小能适合各种高端手机使
- jQuery:流体同位素仅在调整大小后才工作
- 主滑块调整大小到行容器
- Html css缩放会将大小改变几个像素
- img在div中不按百分比调整大小