Solve - $(...).sortable is not a function Error in jQuery

Solve - $(...).sortable is not a function #

The "$(...).sortable is not a function" jQuery error occurs for multiple reasons:

Forgetting to include the jQuery UI library.
Loading the jQuery UI library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.

jquery sortable is not a function error

To solve the "$(...).sortable is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- ✅ Load CSS file for jQuery ui  -->
    <link
      href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />

    <style>
      #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60%;
      }
      #sortable li {
        margin: 0 3px 3px 3px;
        padding: 0.4em;
        padding-left: 1.5em;
        font-size: 1.4em;
        height: 18px;
      }
      #sortable li span {
        position: absolute;
        margin-left: -1.3em;
      }
    </style>
  </head>

  <body>
    <ul id="sortable">
      <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
      </li>
      <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2
      </li>
      <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3
      </li>
    </ul>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load jQuery UI ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ load your JS file ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The order we loaded the scripts in is very important. The order should be the following:

Load the jQuery UI CSS file.
Load the jQuery library.
Load the jQuery UI library.
Run your JS file (index.js in the example).

Here's the code for the index.js file.

index.js

Copied!
$(document).ready(function () {
  $('#sortable').sortable();
});

We wait for the DOM to be ready and initialize the functionality.

If you open the page you'll see a working implementation of the sortable component.

jquery sortable

If you're still getting the error, make sure you're not loading the jQuery library twice. Loading the library a second time re-runs the initialization process and causes the error.

When loading the libraries from files on your local files system, make sure that the paths you specify are correct and point to the right files.

Specifying an incorrect path to the jQuery or jQuery UI scripts is equivalent to not loading the scripts at all.

You can check if the specified paths are correct by opening the console in your browser and checking if you have any 404 errors related to loading the jQuery or jQuery UI libraries.

Solve - $(...).sortable is not a function Error in jQuery

Solve - $(...).sortable is not a function #

Join my newsletter

Borislav Hadzhiev