Uncaught TypeError: $(...).draggable is not a function

hello everyone i am trying to make some divs draggable and i have managed to do that with jquery-ui. i also have a script that removes 2 divs and combine them in a single one (like if they have been merged together) but when i call the draggable function on the new "merged" div i get the error is the title... so what is the problem ? how is it possible that .draggable function work one place and not in an other (on the same file)!!

this is the draggable function:

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");
    }

});
} 

first i called it for the test class which work perfectly with no error

drag("test");

but when i call it another time inside the merge function it return the error: Uncaught TypeError: $(...).draggable is not a function

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

the js file are loaded properly:

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