jQuery UI-Draggable n'est pas une fonction?

j'ai essayé d'utiliser l'effet draggable sur certaines divs sur une page, mais chaque fois que je charge la page, je reçois le message d'erreur: 

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

j'ai eu un coup d'oeil autour il semblait que d'autres personnes avaient ce problème car ils n'avaient pas inclus le fichier javascript jQuery UI, mais je l'ai certainement.

ce qui suit est dans l'étiquette de tête 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 Suggérer une solution?

tout conseil apprécié.

Merci.

édition rapide, j'ai également les outils jquery js inclus dans le chef de la page, si je supprime cela, il fonctionne bien. Quelqu'un a réussi à obtenir ces deux travailler ensemble?

46
demandé sur Dan 2010-05-24 13:17:24

16 réponses

4 ans après que la question a été affichée, mais peut-être qu'il aidera d'autres qui se heurtent à ce problème. La réponse a été postée ailleurs sur StackExchange aussi, mais j'ai perdu le lien et il est difficile de trouver.

réponse: dans jQueryTOOLS, le "core" de jQuery est également intégré si vous utilisez le téléchargement par défaut.

lorsque vous chargez des outils jQuery et jQuery, jQuery core est défini deux fois et va 'désactiver' tous les plugins. "Draggable" (de jQuery-UI) est un tel plug-in.

la solution est d'utiliser des outils jQuery sans les fichiers 'core' de jQuery et tout fonctionnera très bien.

36
répondu Ideogram 2015-10-12 19:07:45

ce problème se produira également si vous ne chargez pas jqueryui ainsi que 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>
31
répondu intotecho 2016-09-22 08:31:11

  1. Install jquery-ui-dist

    utiliser mnp

    npm install --save jquery-ui-dist

    ou fils 151990920"

    yarn add jquery-ui-dist

  2. Importer à l'intérieur de votre code d'application

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

    ou

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

8
répondu srgbnd 2018-09-13 09:53:56

assurez - vous que votre code suit cet ordre - 

<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
7
répondu Arijit Basu 2016-12-14 12:05:34

assurez-vous que vous avez l'objet jQuery et pas l'élément lui-même. Si vous sélectionnez par classe, vous risquez de ne pas obtenir ce que vous attendez.

ouvrez une console et regardez ce que votre code de sélection renvoie. 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() puis appeler draggable() sur cet objet jQuery et c'est terminé.

5
répondu Glenn 2011-03-28 17:48:23

vous pouvez importer ces fichiers js. Il 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
répondu danilobraga 2015-06-13 12:15:22

Hey là, cela fonctionne pour moi (Je ne pouvais pas obtenir ce travail avec le API Google liens 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
répondu Barrie Reader 2010-05-24 10:04:25

ce code ne fonctionnera pas (vous pouvez vérifier dans 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
répondu RouR 2013-10-08 06:53:24

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 draggable. Ils étaient de l'interface utilisateur.souris.js, de l'interface utilisateur.de base et l'interface utilisateur.widget j'.e L'INTERFACE utilisateur de Base Usine De Widget L'Interaction De La Souris

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

1
répondu tariq 2014-05-31 13:10:08

jQuery Tools et jQuery UI entrent en conflit parce qu'ils déclarent tous deux jQuery.tabs et le conflit empêche la seconde (dans ce cas jQuery UI) d'être chargée. C'est la raison pour laquelle vous obtenez une erreur draggable is not a function .

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

Informations sur le conflit trouvé ici: Can JQuery UI et jQuery tools travaillent ensemble?

1
répondu clami219 2017-05-23 11:54:43

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>

Utiliser 

  <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
répondu Harsha B 2015-05-10 15:17:53

ce problème peut également être causé si vous incluez la bibliothèque jQuery normale deux fois. J'ai eu la phrase suivante deux fois, dans mon corps et ma tête.

Il n'a jamais causé de problèmes jusqu'à ce que j'ai essayé d'utiliser jquery UI.

1
répondu user2368795 2015-11-24 00:21:36

la cause de cette erreur est généralement parce que vous utilisez probablement un framework bootstrap et avez déjà inclus un fichier jquery ailleurs peut-être à la tête ou juste au-dessus de l'étiquette de fermeture du corps, dans ce cas tout ce que vous devez faire est d'inclure le fichier jquery ui où vous avez le fichier jquery ou sur les deux endroits et vous serez très 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 d'interface de jQuery ci-dessus partout où vous importez le fichier jquery avec d'autres bootstrap dépendances.

1
répondu Fortune Ekeruo 2016-07-20 09:14:00

si vous développez une application ionique assurez-vous d'inclure jquery et jquery-ui avant ionique.bundle.js!

un tel gaspillage de temps pour quelque chose d'aussi trivial :(

1
répondu Sergio Morstabilini 2017-12-14 08:55:36

j'ai passé en revue à la fois votre question et une autre duplicate .

En fin de compte, la réponse suivante m'a aidé à clarifier certaines choses:

non interceptée-typeerror-déplaçable-est-pas-une-fonction

pour se débarrasser de:

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

j'ai dû mettez les liens vers les bibliothèques Javascript au-dessus de l'étiquette de script 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
répondu Moos Meijer 2018-02-09 13:35:25

j'ai eu le même problème pour une autre raison et mon oeil a eu besoin d'une heure pour le découvrir. J'ai copié-collé les étiquettes de script qui chargent jquery: 

<script src="**https**://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="**http**://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

mon site web utilisait https lorsqu'on y accédait à partir d'un navigateur mobile et refusait de charger jquery-ui sans https.

-1
répondu Sly 2017-05-17 12:09:50