jQuery Draggable Problem

Question

Im trying to get a div to be movable within the constrains of the browser window, by dragging the titlebar inside the div. My code is as follows:

<div id='container'>
    <h3 class='title' id='titlebar'>My Title</h3>
</div>

<script type='text/javascript'>
    $(document).ready(function(){
        $("#titlebar").draggable({ containment: 'window', scroll: false, helper: $('#container') });
    });
</script>

Something is wrong with this (it wont do anything at all) but I cant see the problem!

Answer 1

The .draggable() syntax is a little different than you have, you need to set .draggable() on the element that you want draggable (#container in this case) then provide a selector to the handle option, like this:

$("#container").draggable({ 
  containment: 'window', 
  scroll: false, 
  handle: '#titlebar' 
});​​​

You can see a working demo here.