jQuery draggable not working in Ruby on Rails 3.1

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="draggab开发者_运维知识库le" 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)

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 .

Well, for starters I would check that all parts of the equation work. Make sure that your js files actually loaded. Go into the console and look for $("#draggable"), see what it gives you. If it's found correctly, apply .draggable() to it in the console and see if there are any errors. Or better yet, provide a link where we can look at your project.

This is going to be one of the problems with Rails trying to take over the JS side of things.

Use Firefox + Firebug, or Chrome, and see what the console tells you. It will be "so and so is not defined".

Write your own JS, otherwise you'll never learn it properly. Forget Coffee script and all that rubbish.