web-dev-qa-db-fra.com

jQuery UI - Draggable n'est pas une fonction?

J'ai essayé d'utiliser l'effet déplaçable sur certaines divs d'une page, mais chaque fois que je charge la page, j'obtiens le message d'erreur:

Error: $(".draggable").draggable is not a function

J'ai jeté un coup d'œil, il semblait que d'autres personnes avaient ce problème car elles n'avaient pas inclus le fichier javascript jQuery UI, mais je l'ai certainement.

Ce qui suit est dans la balise head de ma page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Quelqu'un peut-il proposer une solution?

Tout conseil apprécié.

Merci.

Édition rapide, j'ai également les outils jquery js inclus dans la tête de la page, si je supprime cela, cela fonctionne bien. Quelqu'un a-t-il réussi à faire travailler ces deux-là ensemble?

jquerydraggable
51
Dan

Une raison courante se produit si vous ne chargez pas également jqueryui après le chargement de jquery.

Par exemple:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

EDIT. Remplacez le numéro de version de chaque bibliothèque par les valeurs appropriées ou les plus récentes pour jquery et jqueryui .

Si cela ne résout pas le problème, passez en revue les suggestions dans les nombreuses autres réponses.

39
intotecho

4 ans après la publication de la question, mais cela aidera peut-être ceux qui rencontrent ce problème. La réponse a également été publiée ailleurs sur StackExchange, mais j'ai perdu le lien et c'est difficile à trouver.

RÉPONSE: Dans jQueryTOOLS, le "noyau" jQuery est également intégré si vous utilisez le téléchargement par défaut.

Lorsque vous chargez les outils jQuery et jQuery, le noyau jQuery est défini deux fois et "désactive" tous les plugins. 'Draggable' (de jQuery-UI) est un tel plug-in.

La solution consiste à utiliser les outils jQuery SANS les fichiers 'core' jQuery et tout fonctionnera bien.

36
Ideogram

  1. Installer jquery-ui-dist

    utilisez npm

    npm install --save jquery-ui-dist

    ou fil

    yarn add jquery-ui-dist

  2. Importez-le dans le code de votre application

    import 'jquery-ui-dist/jquery-ui';

    ou

    require('jquery-ui-dist/jquery-ui');

13
srgbnd

Assurez-vous que votre code suit cette commande-

<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
8
Arijit Basu

Assurez-vous que vous disposez de l'objet jQuery et PAS l'élément lui-même. Si vous sélectionnez par classe, vous n'obtiendrez peut-être pas ce que vous attendez.

Ouvrez une console et regardez ce que retourne votre code de sélecteur. Dans Firebug, vous devriez voir quelque chose comme:

jQuery( div.draggable )

Vous devrez peut-être aller dans un tableau et saisir le premier élément: $('.draggable').first() Ensuite, appelez draggable () sur cet objet jQuery et vous avez terminé.

6
Glenn

Vous pouvez importer ces fichiers js. Cela a bien fonctionné pour moi.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
4
danilobraga

La cause de cette erreur est généralement due au fait que vous utilisez probablement un framework bootstrap et que vous avez déjà inclus un fichier jquery ailleurs dans la tête ou juste au-dessus de la balise de fermeture, dans ce cas, tous vous devez faire est d'inclure le fichier jquery ui partout où vous avez le fichier jquery ou aux deux endroits et tout ira bien ...

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

incluez simplement le script jquery ui ci-dessus partout où vous importez le fichier jquery avec d'autres dépendances bootstrap.

1
Fortune Ekeruo

Ce code ne fonctionnera pas (vous pouvez archiver le firebug jQuery.ui n'est pas défini):

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

Essayez d'utiliser le code suivant:

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
1
RouR

Si vous développez une application Ionic assurez-vous d'inclure jquery et jquery-ui avant ionic.bundle.js!

une telle perte de temps pour quelque chose de si trivial :(

1
Sergio Morstabilini

Au lieu de

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Utilisation

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
1
Harsha Biyani

les outils jQuery et l'interface utilisateur jQuery entrent en conflit car ils déclarent tous les deux jQuery.tabs et le conflit empêche le chargement du second (dans ce cas jQuery UI). C'est la raison pour laquelle vous obtenez un draggable is not a function Erreur.

Une solution à ce problème consiste à créer une version personnalisée de jQuery Tools (à partir de ici ) sans la fonctionnalité des onglets.

Informations sur le conflit trouvées ici: Les outils JQuery UI et JQuery peuvent-ils fonctionner ensemble?

1
clami219

Cela peut être utile pour quelqu'un:

Dans mon cas, j'ai pu supprimer cette erreur en chargeant d'abord les fichiers js dont dépend le draggable. Ils étaient ui.mouse.js, ui.core et ui.widget, c'est-à-dire UI Core Widget Factory Mouse Interaction

Assurez-vous que la balise de script pour le chargement des dépendances se trouve au-dessus de la balise de chargement js déplaçable.

1
tariq

Ce problème peut également être provoqué si vous incluez deux fois la bibliothèque jquery normale. J'ai eu la ligne suivante deux fois, dans mon corps et ma tête.

Cela n'a jamais causé de problèmes jusqu'à ce que j'essaie également d'utiliser l'interface utilisateur jquery.

1
user2368795

Hé là, cela fonctionne pour moi (je n'ai pas pu faire fonctionner cela avec les liens Google API que vous utilisiez):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Beef Burrito</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
    <script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    </head>
<body>
    <div class="draggable" style="border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;">asdasd</div>

    <script type="text/javascript">
        $(".draggable").draggable();
    </script>
</body>
</html>
1
Barrie Reader

J'ai parcouru à la fois votre question et une autre en double .
Au final, la réponse suivante m'a aidé à trier les choses:
erreur-de-type-non-capturée-déplaçable-est-une-fonction

Se débarrasser de :

$ (". draggable"). draggable n'est plus une fonction

J'ai dû mettre des liens vers des bibliothèques Javascript au-dessus de la balise de script que je m'attendais à travailler.

Mon code:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" />

<script>
    $(function(){
        $("#container-speed").draggable();
    });
</script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="rowbackground"style="width: 600px; height: 400px; margin: 0 auto">
                <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
                <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
            </div>
        </div>
    </div>
</div>
1
Moos Meijer