CODEWITHSUNDEEP
jquery
Vinay Gayakwad
Vinay Gayakwad

Reputation: 536

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

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

Upvotes: 6

Views: 19886

Answers (4)

Shreyansh Sharma
Shreyansh Sharma

Reputation: 1

This two functions are draggable + resizable !

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

Upvotes: 0

user1660624
user1660624

Reputation: 31

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();

Upvotes: 3

Carlos
Carlos

Reputation: 2232

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();
 });

Upvotes: 4

Vivek
Vivek

Reputation: 11028

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

Upvotes: 11

Related Questions