Jquery UI Draggable and Resizable Not working

jquery, jquery-ui

Solution

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/

Problem

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 ?

Original source