jQuery UI - Draggable это не функция?

Question

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

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

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

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

<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 js, включенные в заголовок страницы, если я уберу это, все будет работать нормально. Кому-нибудь удалось заставить этих двоих работать вместе?

Answer 1

Обычная причина: если вы не загружаете 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>

EDIT. Замените номер версии для каждой библиотеки соответствующими или последними значениями для jquery и jqueryui .

Если это не решит проблему, просмотрите предложения во многих других ответах.

Answer 2

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

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

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

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

Answer 3

1. Установка jquery-ui-dist

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

   npm install --save jquery-ui-dist

   или пряжа

   yarn add jquery-ui-dist

2. Импортируйте его в код вашего приложения

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

   или

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

Answer 4

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

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

Answer 5

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

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

jQuery( div.draggable )

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

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

Answer 7

Я прошел как ваш вопрос, так и другой дубликат .
В конце концов, следующий ответ помог мне разобраться:
uncaught-typeerror-draggable-not-a-function

Чтобы избавиться от:

$ (". 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>

Answer 8

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

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

Answer 9

Причиной этой ошибки обычно является то, что вы, вероятно, используете платформу начальной загрузки и уже включили файл jquery где-то еще, возможно, в заголовок или прямо над закрывающим тегом body, в этом случае все, что вам нужно сделать, это включите файл 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, куда бы вы ни импортировали файл jquery вместе с другими зависимостями начальной загрузки.

Answer 10

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

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