Uncaught TypeError: $(…).draggable is not a function [duplicate]

Answer 1

I know this is an old question but since I had the same problem and couldn't find the answer...

I had all of the correct scripts included, checked that the links were valid etc and it still wasn't working.

I then moved the script references to be directly above the code that calls .draggable and.. it works perfectly.

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

Answer 2

Be sure to include in your project this files:

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

Check their example. Use Developer tools (F12 under Chrome) to see if all resources have been imported.