How to make html text box draggable and resizable using jQuery UI plugins?
15,623
Solution 1
Here is the DEMO to make the HTML textbox resizable
and draggable
using 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"});
});
Solution 2
By using jQuery UI
.
HTML FILE
<input type="text" id="resizable" />
JavaScript File
reference all needed jQuery files in script tag i.e
<script src="*all needed .js files*"></script>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
by the way why u need to make textbox resizable
Author by
tesicg
Updated on June 04, 2022Comments
-
tesicg almost 2 years
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>
But, how to make it resizable using jQuery as well?
Thank you in advance.
Goran