jQuery.ui.draggable.js and jQuery.ui.widget.js conflict

Question

I had a working application, which uses a jquery ui dialog. I wanted to make the dialog draggable. As far as I know the only thing needed is the jquery.ui.draggable.js script. So I added it to the scripts I am using, but know I get the following error (as shown in the firebug console): base is not a constructor The relevante line in jquery.ui.widget.js is:

var basePrototype = new base(); 

This is how I am adding all the scripts:

<script type="text/javascript" src="/media/development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="/media/development-bundle/ui/jquery.ui.dialog.js"></script>

Am I doing something wrong? or is this a problem with jquery?

Thanks in advance for any help

Answer 1

You probably should go to the jQuery UI site and build yourself a "custom" packaging of the jQuery UI components you need. Then you'll have just one script to worry about (well, that plus jQuery itself).

Answer 2

The problem is that draggable extends $.ui,mouse, and that was included in the ui core file in UI 1.7x.

You will need to include jquery.ui.mouse.js before draggable, and that will fix the problem.