Q

jQuery UI - ¿Arrastrable no es una función?

2010-05-24 23 views 40 likes

40

he tratando de utilizar el efecto que pueden arrastrarse en algunos divs en una página, pero cuando cargo a la página, me sale el mensaje de error:jQuery UI - ¿Arrastrable no es una función?

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

que he tenido una mirada a su alrededor parecía otras personas estaban teniendo este problema, ya que no habían incluido el archivo jQuery UI javascript, pero definitivamente tengo.

El siguiente es dentro de la etiqueta de la cabeza de mi página:

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

¿Puede alguien sugerir una solución?

Cualquier consejo apreciado.

Gracias.

Edición rápida, también tengo las herramientas jquery js incluidas en el encabezado de la página, si elimino esto, funciona bien. ¿Alguien ha logrado que estos dos trabajen juntos?

2010-05-24 Dan

+0

¿Tiene un enlace directo a la página con este problema? –

+0

No, es solo en mi máquina local atm – Dan

+0

pegar código javascript – Sisir

A

Respuesta

0

Hola, esto funciona para mí (no pude conseguir este trabajo con el API de Google enlaces que estaba usando):

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

Asegúrate de que tienes el objeto jQuery y NO la elemento en sí. Si selecciona por clase, es posible que no obtenga lo que espera.

Abre una consola y mira lo que devuelve tu código selector. En Firebug, debería ver algo como:

jQuery(div.draggable)

Es posible que tenga que ir en una matriz y agarrar el primer elemento: $('.draggable').first() luego llamar a arrastrable() en ese objeto jQuery y ya está.

2011-03-28 17:48:23 Glenn

+0

Esto funcionó muy bien para mí –

0

Este código no funcionará (se puede comprobar en Firebug jQuery.ui es indefinido):

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

Try utilice el código siguiente:

<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

¿Por qué cargar jQuery dos veces? – Tushar

+0

No lo recuerdo. Tal vez no estaba prestando atención – RouR

+0

cargando jquery dos veces probablemente no funcionará en absoluto –

34

4 años después de la pregunta consiguieron publican, pero tal vez ayudará a otros que se encuentren con este problema. La respuesta también se publicó elswehere en StackExchange, pero perdí el enlace y es difícil de encontrar.

RESPUESTA: En jQueryTOOLS, jQuery 'core' también está incorporado si usa la descarga predeterminada.

Cuando carga las herramientas jQuery y jQuery, jQuery core se define dos veces y 'desactivará' cualquier complemento. 'Draggable' (de jQuery-UI) es un complemento.

La solución es utilizar una herramienta jQuery SIN los archivos jQuery 'core' y todo funcionará bien.

2014-03-19 15:03:55 Ideogram

+0

+1 Si bien esta no fue la solución exacta a mi problema, me llevó a la respuesta. Gracias. – Wade73

+1

Y en 2017 esto me ayuda. Gracias. –

+5

Lo siento pero no tengo idea de a qué te refieres con esta respuesta. He cargado jquery.min.js y jquery-ui.min.js en este orden específico. No sé qué es jqueryTOOLS ni lo uso. – Loko

0

Esto puede ser útil para alguien:

En mi caso yo era capaz de eliminar este error al cargar primero los archivos js de los que depende que pueden arrastrarse. Eran ui.mouse.js, ui.core y ui.widget i.e interfaz de usuario Core Widget Factory ratón Interacción

Asegúrese de que la etiqueta de script para las dependencias de carga está por encima de la etiqueta de carga se pueda arrastrar la JS.

2014-05-31 13:10:08 tariq

0

jQuery Tools y jQuery UI entran en conflicto porque ambos declaran jQuery.tabs y el conflicto impide que se cargue el segundo (en este caso jQuery UI). Esta es la razón por la que obtiene un error draggable is not a function.

Una solución a este problema es crear una versión personalizada de jQuery Tools (desde here) sin la funcionalidad de pestañas.

Informaciones sobre el conflicto encontrar aquí: Can JQuery UI and JQuery tools work together?

2014-06-10 14:35:21 clami219

25

Este problema también se producirá si no se carga jqueryui, así como jQuery

Por ejemplo:

<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

¡Funcionó perfectamente, gracias! En una nota al margen, la biblioteca actualizada ahora está en: – bkunzi01

0

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

Uso

<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

Puede importar estos archivos js. Funcionó bien para mí

<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

Este problema también puede deberse a que incluya la biblioteca jquery normal dos veces. Tenía la siguiente línea dos veces, en mi cuerpo y cabeza.

Nunca causó ningún problema hasta que probé a usar la interfaz de usuario jQuery también.

2015-11-24 00:21:36 user2368795

0

La causa de este error suele ser porque probablemente esté utilizando un marco de arranque y ya haya incluido un archivo jquery en otro lugar a la cabeza o encima de la etiqueta de cierre del cuerpo, en ese caso todo lo que necesita hacer es para incluir el archivo de jQuery UI siempre que tengas el archivo de jQuery o en ambos ambos lugares y se le multa ...

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

basta con incluir el script de jQuery UI por encima de donde va a importar el archivo de jQuery, junto con otra dependencias bootstrap.

2016-07-20 09:14:00

5

Asegúrese de que el código sigue este orden-

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

2016-12-14 12:05:34

+1

el script en OP sugeriría que sí. – dlatikay

0

que tenía el mismo problema por otra razón y mi ojo necesitaba una hora para averiguar. tuve copia-pega el guión etiquetas que jQuery carga:

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

Mi sitio web se utiliza HTTPS cuando se accede desde un navegador móvil y se negó a cargar jquery-ui sin https.

2017-05-17 12:09:50 Sly

0

Si está desarrollando una aplicación Ionic, asegúrese de incluir jquery y jquery-ui antes de ionic.bundle.js.

como una pérdida de tiempo para algo tan trivial :(

2017-12-14 08:55:36

1

Si NPM se utiliza

Instalar jquery-ui-dist

npm install --save jquery-ui-dist
de importación dentro de su código de aplicación

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

o

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

2018-01-31 10:39:42 trex

0

pasé por tanto su pregunta y una otra duplicate.
Al final, la siguiente respuesta me ayudó a ordenar las cosas:
uncaught-typeerror-draggable-is-not-a-function

para deshacerse de:.

$ ("arrastrable") que pueden arrastrarse no es una función más

Tuve que poner enlaces a las bibliotecas de Javascript por encima de la etiqueta de secuencia de comandos que esperaba estar trabajando.

Mi código:

<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

Si tiene una nueva pregunta, por favor, haga clic en el botón [Ask Question] (https://stackoverflow.com/questions/ask). Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - [De la crítica] (/ review/low-quality-posts/18770943) – iklinac

Cuestiones relacionadas