JQuery UI - Draggable не является функцией?

Я пытаюсь использовать эффект draggable для некоторых div на странице, но всякий раз, когда я загружаю страницу, я получаю сообщение об ошибке:

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

Я посмотрел вокруг, казалось, что у других людей была эта проблема, поскольку они не включали javascript файл jQuery UI, но я определенно имел.

В главном теге моей страницы находится следующее:

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

Может ли кто-нибудь предложить решение?

Любые советы приветствуются.

Спасибо.

Быстрое редактирование, у меня также есть jquery tools js, включенные в заголовок страницы, если я удалю это, он работает нормально. Кто-нибудь сумел заставить этих двух работать вместе?

Ответ 1

Через 4 года после опубликования вопроса, но, возможно, это поможет другим, столкнувшимся с этой проблемой. Ответ также был опубликован в другом месте на StackExchange, но я потерял ссылку и ее трудно найти.

ANSWER: В jQueryTOOLS ядро jQuery также встроено, если вы используете загрузку по умолчанию.

Когда вы загружаете инструменты jQuery и jQuery, ядро jQuery определяется дважды и будет "отключать" любые плагины. "Draggable" (из jQuery-UI) - такой плагин.

Решение состоит в том, чтобы использовать инструменты jQuery БЕЗ файлов ядра ядра jQuery, и все будет работать нормально.

Ответ 2

Эта проблема также возникает, если вы не загружаете jqueryui, а также jquery

Например:

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

Ответ 3

Установите jquery-ui-dist

использовать npm

npm install --save jquery-ui-dist

или пряжа

yarn add jquery-ui-dist
Импортируйте его в свой код приложения

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

или же

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

Ответ 4

Убедитесь, что ваш код соответствует этому порядку -

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

Ответ 5

Убедитесь, что у вас есть объект jQuery, а НЕ - сам элемент. Если вы выберите по классу, возможно, вы не получите того, что ожидаете.

Откройте консоль и посмотрите, что возвращает ваш код. В Firebug вы должны увидеть что-то вроде:

jQuery( div.draggable )

Возможно, вам придется перейти в массив и захватить первый элемент: $('.draggable').first() Затем вызовите draggable() на этом объекте jQuery, и все готово.

Ответ 6

Вы можете импортировать эти файлы js. Это сработало для меня.

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

Ответ 7

Эй, это работает для меня (я не мог заставить это работать с API Google, которые вы использовали):

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

Ответ 8

Этот код не будет работать (вы можете проверить firebug jQuery.ui undefined):

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

Попробуйте использовать следующий код:

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

Ответ 9

Это может быть полезно для некоторых:

В моем случае я смог удалить эту ошибку, сначала загрузив файлы js, от которых зависит перетаскивание. Это были ui.mouse.js, ui.core и ui.widget т.е. Интерфейс пользовательского интерфейса Виджет Factory Взаимодействие с мышью

Убедитесь, что тег script для зависимостей загрузки находится над загружаемым тегом js loadgable.

Ответ 10

jQuery Tools и jQuery UI попадают в конфликт, потому что оба объявляют jQuery.tabs, а конфликт предотвращает загрузку второго (в данном случае jQuery UI). Вот почему вы получаете ошибку draggable is not a function.

Решением этой проблемы является создание пользовательской версии jQuery Tools (от здесь) без функциональных возможностей табуляции.

Информация о конфликте, найденном здесь: Могут ли работать инструменты JQuery UI и JQuery?

Ответ 11

Вместо

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

Использование

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

Ответ 12

Эта проблема также может быть вызвана, если вы дважды включили обычную библиотеку jquery. У меня была следующая строка дважды, в моем теле и голове.

Это никогда не вызывало никаких проблем, пока я не попытался использовать пользовательский интерфейс jquery.

Ответ 13

Причиной этой ошибки обычно является то, что вы, вероятно, используете фреймворк начальной загрузки и уже включили файл jquery где-то еще в голове или прямо над тегом закрывающего тела, в этом случае все, что вам нужно сделать, это включая файл jquery ui, где бы вы ни были, файл jquery или оба места, и вы будете в порядке...

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

просто включите указанный выше jquery ui script везде, где вы импортируете файл jquery вместе с другими зависимостями загрузки.

Ответ 14

Если вы разрабатываете приложение Ionic, обязательно включите jquery и jquery-ui перед ionic.bundle.js!

такая пустая трата времени для чего-то такого тривиального: (

Ответ 15

Я рассмотрел и ваш вопрос, и еще один дубликат.
В конце концов, следующий ответ помог мне разобраться:
неперехваченный-TypeError-перетаскиваемая-это-не-а-функция

Избавиться от:

$ (". draggable"). draggable больше не является функцией

Мне пришлось поместить ссылки на библиотеки Javascript над тегом скрипта, который, как я ожидал, будет работать.

Мой код:

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

Ответ 16

У меня была одна и та же проблема по другой причине, и моему глазу понадобился час, чтобы узнать. У меня были скопированные теги script, которые загружают 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>

Мой сайт использовал https при доступе из мобильного браузера и отказался загружать jquery-ui без https.