it-swarm.com.ru

Uncaught TypeError: $ (...). Draggable не является функцией

привет всем, я пытаюсь сделать некоторые div'ы перетаскиваемыми, и мне удалось сделать это с помощью jquery-ui. У меня также есть скрипт, который удаляет 2 div и объединяет их в один (например, если они были объединены вместе), но когда я вызываю перетаскиваемую функцию на новом «объединенном» div, я получаю сообщение об ошибке - заголовок ... в чем проблема ? Как это возможно, что функция .draggable работает в одном месте, а не в другом (в том же файле) !!

это перетаскиваемая функция:

function drag($class){
$("."+$class).draggable({
containment: ".tab-content",
grid: [ 3, 3 ],
zIndex:100,
obstacle: "#nothere",
preventCollision: true,
drag:
function(){
    $(".test").css("background-color","red");
    $(this).css("background-color","green");
    }

});
} 

сначала я назвал его для тестового класса, который отлично работает без ошибок 

drag("test");

но когда я вызываю его в другой раз внутри функции слияния, он возвращает ошибку: Uncaught TypeError: $ (...). draggable не является функцией 

drag("test:not(.ui-draggable)");

jS-файл загружен правильно: 

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
4
zouzou b lebiane

Обязательно включите в свой проект эти файлы:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Проверьте их пример . Используйте инструменты разработчика (F12 под Chrome), чтобы увидеть, все ли ресурсы были импортированы.

4
Beri

Я знаю, что это старый вопрос, но так как у меня была та же проблема, и я не мог найти ответ ... 

Я включил все правильные сценарии, проверил, что ссылки действительны и т.д., и он все еще не работал.

Затем я переместил ссылки на сценарии прямо над кодом, который вызывает .draggable, и ... он отлично работает.

<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 type="text/javascript">
            $(function () {
                $(".regionStyle li").draggable();
                $(".regionStyle").droppable({
                    drop: function (event, ui) {
                        $(this)
                        .addClass("ui-state-highlight")
                        .find("p")
                        .html("Item Dropped!");
                    }
                });
            });
0
Gary