На этот вопрос уже есть ответ здесь:

Привет всем, я пытаюсь сделать некоторые 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>