Question

I’m trying to get the jquery draggable function to work, particularly the stacking feature, in Drupal. I’ve got the JQuery UI module installed and it works fine with a hide/reveal sliding box but not for the draggable?

Here’s what I’ve got in the body of my page:

<?php
drupal_add_js('
$(document).ready(function drag() {
  $(".cc-drag").draggable();
});','inline');
?>

<div class="cc-drag">
    <div class="cc_top">
    <div class="cc_content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit dolor, ornare non vulputate quis, dictum ut neque. 
    Nunc non velit at nulla posuere pulvinar. Maecenas vitae diam iaculis lorem sagittis condimentum et at elit. 
    Praesent ac augue dolor. 
    Sed sit amet orci leo, vitae sagittis ante. 
    Phasellus id volutpat nibh. 
    Nam ullamcorper mi at urna cursus vitae aliquet est ullamcorper.
    </div>
    </div>
<div class="cc_bottom"></div>
</div>

I’m using Drupal 6.x on WAMP.

Thanks!

Answer 1

For some reason the js files weren’t loading, or not loading fully, so I copied the ones I needed to my theme folder and linked to them in my .info file.

scripts[] = js/jquery.ui.widget.js 
scripts[] = js/jquery.ui.mouse.js 
scripts[] = js/jquery.ui.core.js 
scripts[] = js/jquery.ui.draggable.js 

The order they are loaded is important. I found many many other threads and forums where other people have been having the same problem in the last 1-4 months. Hope this helps someone else. The js console in firebug was really helpful in getting to the root of the errors, if anyone needs to explore their own problem further.