如何使用 jQuery UI 插件使 html 文本框可拖动和调整大小？

Posted 2023-05-08

【中文标题】如何使用 jQuery UI 插件使 html 文本框可拖动和调整大小？

【英文标题】：How to make html text box draggable and resizable using jQuery UI plugins?

【发布时间】：2012-05-30 18:26:57

【问题描述】：

使用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>

但是，如何使用 jQuery 来调整大小呢？

提前谢谢你。

戈兰

【问题讨论】：

你需要的函数是resize() 使用方法见这个链接：api.jquery.com/resize

***.com/questions/8575637/… 的副本您正在寻找的答案就在那里。 cancel: null

【参考方案1】：

这里是 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");
);

【参考方案2】：

通过使用jQuery UI。HTML 文件<input type="text" id="resizable" />JavaScript 文件 在脚本标签中引用所有需要的 jQuery 文件，即

<script src="*all needed .js files*"></script>

<script>
    $(function()       
    $( "#resizable" ).resizable();
);
</script>

顺便说一下为什么你需要让文本框调整大小