Input text box with Jquery ui draggable and resizable with containment

by Rahul Gupta

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>

CSS

#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable, #container { padding: 0.5em; }

JavaScript

$(function() {
     $( "#resizable" ).resizable({
containment: "#container"
});
     $( "#draggable" ).draggable({containment: "#container"});
});