CODEWITHSUNDEEP
drupaljquery-uijquery-ui-sortable
Robimp
Robimp

Reputation: 698

Drupal JQuery UI Draggable / Stacking Divs

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!

Upvotes: 1

Views: 4062

Answers (3)

Queenvictoria
Queenvictoria

Reputation: 401

In Drupal 7, where jQuery UI is in core:

drupal_add_library('system', 'ui.draggable');

See http://drupal.org/node/1001508

In Drupal 6:

jquery_ui_add(array('ui.draggable'));

Upvotes: 3

Robimp
Robimp

Reputation: 698

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.

Upvotes: 0

Chris Edwards
Chris Edwards

Reputation: 11

This is the preferred method:

jquery_ui_add(array('ui.draggable', 'ui.resizable', 'ui.dialog'));

Just place that in your module's hook_init() function.

Upvotes: 0

Related Questions