Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 245
Daniel S Avatar asked Apr 07 '10 17:04

Daniel S


People also ask

Why is draggable not working?

Check whether your draggable object is already loaded in the viewport. If it is not, it won't work properly. JUST AFTER the draggable object to be absolutely sure that everything is loaded at the correct time. When you'll be sure everything is ok, then you'll be able to refactor.

What is jQuery draggable?

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.

How do I use draggable JS?

By default, only image and text can be draggable. To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.

How do you drag and drop in jQuery?

Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .


1 Answers

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.

like image 185
Aaron Avatar answered Oct 13 '22 00:10

Aaron