如何使用jQuery UI插件使html文本框可拖动和调整大小? [英] How to make html text box draggable and resizable using jQuery UI plugins?
本文介绍了如何使用jQuery UI插件使html文本框可拖动和调整大小?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用 jquery ui draggable
插件,我已经以这种方式使html文本框可拖动:
Using jquery ui draggable
plugin, I've made html text box draggable in this way:
<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>
但是,如何使用jQuery使其可调整大小?
But, how to make it resizable using jQuery as well?
提前谢谢。
Goran
推荐答案
这是 DEMO 来制作HTML文本框 resizable
和 draggable
使用 jquery-ui
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插件使html文本框可拖动和调整大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文