CODEWITHSUNDEEP
jqueryjquery-ui
VishwaKumar
VishwaKumar

Reputation: 3433

Jquery UI Draggable and Resizable Not working

I am trying to achieve the effect in the following fiddle:

http://jsfiddle.net/vrUgs/2/

Check my jsfiddle: http://jsfiddle.net/H9kgP/

How can i have a div both draggable and resizeable ? The div with contenteditable="true" is not working, cant edit. What the problem here ?

Updated code from Answer by Chris Moutray:

<!doctype html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
    body{ }
    #container{ width: 980px; margin: 0 auto; }
    #background { background: red; width: 600px; height: 400px; margin: 0 auto; background-size: 600px 400px;}
    .draggable { width: 250px; height: 150px; padding: 0.5em; opacity: 0.5; color: #000; background: #f0f0f0; }
    </style>
    <script>
        $(document).ready(function() {
            $(".resizeable").resizable({
                containment: "#background"
            });

            $(".draggable").draggable({
                cursor: "crosshair",
                containment: "#background",
            });
        });

    </script>
</head>
<body>
<div id="container">
    <div id="background">
        <div class="draggable resizeable" style="display:inline-block">
                <div contenteditable="true" id="message">
                    Enter message..
                </div>
        </div>
    </div>
</div>
</body>
</html>

The draggable is working fine but the horizantal resize does not work. When i try to increase the horizontal size, it gets smaller automatically and then cant resize again. What may be the problem ?

Upvotes: 5

Views: 9556

Answers (1)

Chris Moutray
Chris Moutray

Reputation: 18399

First you need to link the jquery-ui resource

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />

Then you can perhaps merge the draggable and resizable elements into one and reference by class instead.

HTML 

<div id="background">
    <div class="draggable resizeable" style="display:inline-block">
        <div contenteditable="true" id="message">
            Enter message..
        </div>
    </div>
</div>

JQUERY

$(".resizeable").resizable({
    containment: "#background"
});

$(".draggable").draggable({
    cursor: "crosshair",
    containment: "#background",
});

Heres a working example of your code http://jsfiddle.net/chrismoutray/H9kgP/2/

Upvotes: 3

Related Questions