jquery ui не работает с рельсами 4

Question

Использовать пользовательский интерфейс jQuery с рельсами 4.2.3. И это не работает для меня.

Используйте драгоценный камень «jquery-ui-rails».

Попробуйте сделать простой перетаскивать элемент, как этот https://jqueryui.com/draggable/#default

Но я не могу пошевелить Div элемент.

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

мои 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 в Firefox и Chrome.

Я попытался прекомпилировать активы, очистил все старые драгоценные камни. И пытался вручную подключить макет (когда я сделал это я удаляю Jquery строки в 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> 

браузер не показывает никаких ошибок. Все jquery-ui-файлы, которые я вижу в активах/jquery-ui, используют средства разработки в браузере.

Помощь. Где моя ошибка?

Answer 1

Проблема, скорее всего, заключается в том, что вы пытаетесь запустить код до полной загрузки DOM и, следовательно, он даже не может найти $("#draggable"). Изменение

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

в

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

который загрузит для DOM, чтобы получить полностью загружены перед вызовом перемещаемой.