Question

I started a new RoR 3.1 project to test this. I’ve added the following needed jQuery .js files to make draggable work correctly into my app/assests/javascripts directory.

jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js

The application.js has the default code:

//= require jquery
//= require jquery_ujs
//= require_tree .

I then added the .js code to make it all work into the application.js file:

$(function() {
  $( "#draggable" ).draggable();
});

So this is all set.

Then I use the following code in my home page:

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

Dragging doesn’t work! The code I used is based on the jQuery demo file for draggable. It works fine as a HTML file but when I put into my Ruby on Rails 3.1 project, it doesn’t work. What am I doing wrong? I’ve been pulling my hair because of this. Thanks for your help!

(Not i’ve removed css formatting to make my code look simplier. Its not because of that though)

Answer 1

You need to make sure the dependencies between jQuery UI files are preserved.

Rails provides no guarantee of order. So you need to change your application.js to:

//= require jquery
//= require jquery_ujs
//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.draggable
//= require_tree .

Or alternatively you can use pakunok gem to do it automatically for you:

//= require jquery
//= require jquery_ujs
//= require pakunok/jquery-ui/pack/draggable
//= require_tree .