jquery ui doesn't work with rails 4

Question

Use jQuery UI with rails 4.2.3. And it doesn't work for me.

Use gem "jquery-ui-rails".

Try to make a simple draggable element like this https://jqueryui.com/draggable/#default

But I can't move my div element.

<div id = "draggable" class="ui-widget-content">
  <p>Element</p>
</div>

my apllication.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

$("#draggable").draggable();

apllication.css

*= require jquery-ui
*= require_tree .
*= require_self
 */

#draggable{width:110px;height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}

Test in Firefox and Chrome.

I tried to precompile assets, cleaned up all old gems. And tried to manually plug in layout(when i made it I delete jquery lines in application.js )

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Browser doesn't show any mistakes. All jquery-ui files I can see in assets/jquery-ui when use Development tools in browser.

Help. Where is my mistake?

Answer 1

The problem most probably is that you try to run the code before the DOM is completely loaded and thus it can't even find the $("#draggable") . Change the

$("#draggable").draggable();

to

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

which will load for DOM to get fully loaded before calling draggable .