Geek Answers Handbook

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

Hi everyone, I'm trying to make some divs draggable, and I managed to do this using jquery-ui. I also have a script that removes 2 divs and merges them into one (for example, if they were merged together), but when I call the drag function on a new "merged" div, I get an error - that’s the name .. So what is the problem ? how is it possible that the .draggable function works in one place and not in another (in the same file) !!

this is a drag and drop 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");
    }

});
}

I called it first for a test class that works fine without errors

drag("test");

but when I call it at another time inside the merge function, it returns an error: Uncaught TypeError: $ (...). Draggable is not a function

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

js file loaded correctly:

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

:

  <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), , .

+3

, , ...

, , .., .

script , .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

More articles:


All Articles