jQuery draggable ne fonctionne pas dans Ruby on Rails 3.1

Question

J'ai commencé un nouveau projet RoR 3.1 pour le tester. J'ai ajouté les fichiers jQuery .js nécessaires pour que le travail soit correctement déplacé dans mon répertoire app/assests/javascripts.

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

Le application.js a le code par défaut:

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

J'ai ensuite ajouté le code .js pour le faire tous les travaux dans le fichier application.js:

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

Alors Tout est réglé.

Puis-je utiliser le code suivant dans ma page d'accueil:

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

Glissement ne fonctionne pas! Le code que j'ai utilisé est basé sur le fichier de démonstration jQuery pour draggable. Cela fonctionne bien en tant que fichier HTML, mais quand je mets dans mon projet Ruby on Rails 3.1, cela ne fonctionne pas. Qu'est-ce que je fais mal? J'ai tiré mes cheveux à cause de ça. Merci de votre aide!

(pas que j'ai supprimé le formatage css pour rendre mon code plus simple. Ce ne est pas à cause de cela bien)

Answer 1

Vous devez vous assurer que les dépendances entre les fichiers de l'interface utilisateur jQuery sont conservées.

Rails ne fournit aucune garantie de commande. Donc, vous devez changer votre application.js à:

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

Ou bien vous pouvez utiliser pakunok petit bijou pour le faire automatiquement pour vous:

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

Answer 2

Eh bien, pour commencer, je voudrais vérifier que toutes les parties de l'œuvre de l'équation. Assurez-vous que vos fichiers js sont effectivement chargés. Allez dans la console et cherchez $ ("# draggable"), voyez ce qu'il vous donne. Si elle est trouvée correctement, appliquez .draggable() dans la console et vérifiez s'il y a des erreurs. Ou mieux encore, fournissez un lien où nous pouvons regarder votre projet.