Q

jQuery UI - Draggable non è una funzione?

2010-05-24 26 views 40 likes

40

Ho cercando di utilizzare l'effetto trascinabile su alcuni div in una pagina, ma ogni volta che caricare la pagina, ottengo il messaggio di errore:jQuery UI - Draggable non è una funzione?

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

Ho avuto uno sguardo intorno sembrava altre persone erano avendo questo problema in quanto non avevano incluso l'interfaccia utente jQuery file javascript, ma io sicuramente.

Quello che segue è all'interno del tag head della mia pagina:

<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>

Qualcuno può suggerire una soluzione?

Qualsiasi consiglio è gradito.

Grazie.

modifica rapida, ho anche gli strumenti jQuery js inclusi nella testa della pagina, se tolgo questo funziona bene. Qualcuno è riuscito a far lavorare questi due insieme?

2010-05-24 Dan

+0

Avete un collegamento in diretta alla pagina con questo problema? –

+0

No, è solo sul mio computer locale atm – Dan

+0

incollare il codice javascript – Sisir

A

risposta

0

Hey there, questo funziona per me (non ho potuto ottenere questo lavoro con l'API di Google link si stava utilizzando):

<!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>

2010-05-24 10:04:25

3

Assicuratevi di avere l'oggetto jQuery e NON la elemento stesso. Se selezioni per classe, potresti non ottenere ciò che ti aspetti.

aprire una console e guardare a ciò che i tuoi restituisce il codice di selezione. In Firebug, si dovrebbe vedere qualcosa di simile:

jQuery(div.draggable)

Potrebbe essere necessario andare in un array e afferrare il primo elemento: $('.draggable').first() quindi chiamare trascinabili() su tale oggetto jQuery e il gioco è fatto.

2011-03-28 17:48:23 Glenn

+0

Questo ha funzionato molto bene per me –

0

Questo codice non funziona (è possibile controllare in Firebug jQuery.ui è indefinito):

<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>

Prova utilizzare il codice seguente:

<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>

2013-10-08 06:53:24 RouR

+1

Perché caricare jQuery due volte? – Tushar

+0

Non ricordo. Forse non stavo prestando attenzione – RouR

+0

caricamento jquery due volte probabilmente non funzionerebbe affatto –

34

4 anni dopo la questione GOT postato, ma forse aiuterà gli altri che si imbattono in questo problema. La risposta è stata pubblicata sulla elswehere StackExchange pure, ma ho perso il link ed è difficile da trovare.

RISPOSTA: In jQueryTOOLS, 'core' jQuery è anche integrato se si utilizza il download predefinita.

Quando si caricano gli strumenti jQuery e jQuery, il core jQuery viene definito due volte e "annulla" qualsiasi plug-in. 'Draggable' (da jQuery-UI) è un tale plug-in.

La soluzione è utilizzare gli strumenti jQuery SENZA i file 'core' di jQuery e tutto funzionerà correttamente.

2014-03-19 15:03:55 Ideogram

+0

+1 Mentre questa non era la soluzione esatta al mio problema, mi ha portato alla risposta. Grazie. – Wade73

+1

E nel 2017 questo mi aiuta. Grazie. –

+5

Scusa ma non ho idea di cosa intendi con questa risposta. Ho caricato jquery.min.js e jquery-ui.min.js in questo ordine specifico. Non so cosa sia jqueryTOOLS né lo uso. – Loko

0

Questo può essere utile per qualcuno:

Nel mio caso sono stato in grado di rimuovere questo errore prima di caricare i file JS da cui dipende trascinabili. Erano ui.mouse.js, ui.core e ui.widget i.e UI Nucleo Widget Factory mouse Interazione

Assicurarsi che il tag script per le dipendenze di carico si trova la tag di carico del trascinabile js.

2014-05-31 13:10:08 tariq

0

Gli strumenti jQuery e l'interfaccia utente jQuery entrano in conflitto perché dichiarano entrambi jQuery.tabs e il conflitto impedisce il caricamento del secondo (in questo caso jQuery UI). Questo è il motivo per cui si ottiene un errore draggable is not a function.

Una soluzione a questo problema è quello di creare una versione personalizzata di jQuery Tools (da here), senza la funzionalità di schede.

Informazioni sul conflitto trovato qui: Can JQuery UI and JQuery tools work together?

2014-06-10 14:35:21 clami219

25

Questo problema si verifica anche se non si carica jQueryUI così come jQuery

Ad esempio:

<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>

2015-01-29 04:44:08 intotecho

+0

ha funzionato perfettamente, grazie! In un sidenote la libreria aggiornata è ora a: – bkunzi01

0

Invece di

<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>

Utilizzare

<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>

2015-05-10 15:17:53 Harsha

3

È possibile importare questi file js. Ha funzionato bene per me.

<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>

2015-06-13 12:15:22 danilobraga

0

Questo problema può anche essere causato se si include la normale libreria jQuery due volte. Ho avuto la seguente riga per due volte, nel mio corpo e la testa.

Non ha mai causato problemi finché non ho provato a utilizzare anche l'interfaccia utente di jquery.

2015-11-24 00:21:36 user2368795

0

La causa di questo errore è solitamente dovuta al fatto che probabilmente stai usando un framework di bootstrap e hai già incluso un file jquery da qualche altra parte in testa o proprio sopra il tag di chiusura del corpo, in tal caso tutto quello che devi fare è per includere il file jQuery UI, ovunque si dispone del file jquery o su entrambi i entrambi i luoghi e andrà tutto bene ...

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

appena includono il sopra jQuery script di ui, ovunque si sta importando il file jquery insieme ad altri dipendenze bootstrap.

2016-07-20 09:14:00

5

assicurarsi che il codice segue questo ordine-

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

2016-12-14 12:05:34

+1

lo script in OP suggerirebbe di farlo. – dlatikay

0

Ho avuto lo stesso problema per un altro motivo e il mio occhio bisogno di un'ora per scoprirlo. ho avuto copia-incollato lo script tag che jquery carico:

<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>

Mio sito stava usando https quando si accede da un browser mobile e ha rifiutato di caricare jQuery-ui, senza https.

2017-05-17 12:09:50 Sly

0

Se si sta sviluppando un'applicazione ionico essere sicuri di includere jQuery e jQuery-ui prima ionic.bundle.js!

come una perdita di tempo per qualcosa di così banale :(

2017-12-14 08:55:36

1

Se NPM viene utilizzato

Installare jquery-ui-dist

npm install --save jquery-ui-dist
importarla all'interno del vostro codice di applicazione

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

o

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

2018-01-31 10:39:42 trex

0

ho attraversato sia la tua domanda e una un'altra duplicate.
Alla fine, la seguente risposta mi ha aiutato a risolvere le cose:
uncaught-typeerror-draggable-is-not-a-function

per sbarazzarsi di:.

$ ("trascinabile") draggable non è più una funzione

Ho dovuto inserire collegamenti alle librerie Javascript sopra il tag di script Mi aspettavo di lavorare.

Il mio codice:

<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>

2018-02-09 08:34:29

+0

Se hai una nuova domanda, per favore chiedi facendo clic sul pulsante [Chiedi domanda] (https://stackoverflow.com/questions/ask). Includere un collegamento a questa domanda se aiuta a fornire il contesto. - [Dalla recensione] (/ recensione/post di bassa qualità/18770943) – iklinac

Problemi correlati