How can i make element both draggable and resizable in jquery?

Question

How can i make element both draggable and resizable in jquery?

Answer 1

both draggable and resizable supports chaining mode so you can simplify your code in one line.
Let say you have a div and id of that div is header which you want to make draggable and resizable.then jquery will work like this....

$(document).ready(function() {

    $("#header").draggable().resizable();
 });

see demo here...DEMO
refer this tutorial for more information ....Draggable and resizable

Answer 2

Besides using jQuery you also have to use jQuery UI http://jqueryui.com/demos/.

jQuery UI will provide all of the functionality for what you would need. More specifically you want the Draggable and Resizable plugins (perhaps the Droppable too depending of what you are trying to do).

Then you will need to do the following to make it Draggable and Resizable:

$(document).ready(function() {

    $(".elements").draggable().resizable();
 });

Answer 3

this is the original source

// this will make <div id="box"> resizable and draggable 
$('#box').resizable().parent().draggable(); 

// same but slightly safer since it checks parent's class 
$('#box').resizable().parent('.ui-wrapper').draggable();