使用jQuery .sortable函数报错：$(...).sortable is not a function

Hey there, let's work through that $(...).sortable is not a function error you're hitting—this is one of the most common gotchas when setting up jQuery UI Sortable, so we'll break down the fixes step by step.

Common Causes & Fixes #

1. You're Loading Scripts in the Wrong Order #

jQuery UI depends entirely on the core jQuery library, so you must load jQuery first, then jQuery UI, and finally your custom script. This is the #1 reason for this error. Here's the correct order:

<!-- 1. Load core jQuery first -->
<script src="path/to/jquery.min.js"></script>
<!-- 2. Load jQuery UI next -->
<script src="path/to/jquery-ui.min.js"></script>
<!-- 3. Load your custom sorting script last -->
<script src="path/to/your-sort-script.js"></script>

Double-check that you haven't flipped jQuery and jQuery UI—this mistake is easy to make!

2. Version Incompatibility Between jQuery & jQuery UI #

Not all jQuery versions play nice with all jQuery UI versions. For example:

• If you're using jQuery 3.x, stick to jQuery UI 1.12.x (it's the last stable version fully compatible with jQuery 3).
• Avoid mixing old jQuery (like 1.x) with newer jQuery UI versions, as this can break plugin bindings.

Stick to matched version pairs—you can grab pre-tested pairs from the official jQuery CDN if you're not using local files.

3. You're Loading jQuery Multiple Times #

If your page accidentally loads jQuery twice (e.g., once from a CDN and once locally), the second load will overwrite the first instance—wiping out any jQuery UI plugins attached to the first one.

Check your page's <script> tags and remove duplicate jQuery imports.

4. Incorrect File Path for jQuery UI #

If you're loading jQuery UI locally, make sure the file path is correct. Open your browser's DevTools (F12), go to the Network tab, refresh the page, and look for jquery-ui.js or jquery-ui.min.js. If you see a 404 error, your path is wrong.

For example:

• If your script is in a js folder, and jQuery UI is also in that folder, use src="js/jquery-ui.min.js" instead of src="jquery-ui.min.js".

5. You're Using jQuery.noConflict() (And Forgetting to Adjust) #

If your code uses $.noConflict() to release the $ alias for jQuery, you can't use $ to call sortable(). Instead, either:

• Use the full jQuery keyword:

  jQuery('#groupDiv').sortable();
  

• Or wrap your code in a callback that passes jQuery as $:

  jQuery(document).ready(function($) {
    // Now $ works normally inside this function
    $('#groupDiv, #userDiv').sortable();
  });
  

6. Your jQuery UI Build Doesn't Include the Sortable Component #

If you downloaded a custom jQuery UI package, you might have forgotten to check the Sortable component during the download process. Without it, the sortable() method won't exist.

Double-check your downloaded jQuery UI files—if you missed Sortable, re-download the package and make sure to select Sortable under the "Interactions" section.

Working Example Code #

Here's a minimal, tested example you can use as a reference:

<!DOCTYPE html>
<html>
<head>
  <!-- Optional: Add jQuery UI CSS for visual feedback during sorting -->
  <link rel="stylesheet" href="path/to/jquery-ui.min.css">
  
  <!-- Load scripts in correct order -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  
  <script>
    $(document).ready(function() {
      // Initialize sortable on both containers
      $('#groupDiv, #userDiv').sortable({
        placeholder: 'ui-state-highlight', // Shows a placeholder where the item will drop
        cursor: 'move' // Changes cursor to indicate draggable
      }).disableSelection(); // Prevents text selection while dragging
    });
  </script>
  
  <style>
    /* Basic styling to make lists visible */
    #groupDiv, #userDiv {
      width: 220px;
      margin: 2rem;
      float: left;
    }
    #groupDiv ul, #userDiv ul {
      padding: 0;
    }
    #groupDiv li, #userDiv li {
      padding: 0.8rem;
      background: #f5f5f5;
      margin: 0.5rem 0;
      list-style: none;
      border-radius: 4px;
    }
    .ui-state-highlight {
      height: 3rem;
      background: #e0e0e0;
      border-radius: 4px;
      margin: 0.5rem 0;
    }
  </style>
</head>
<body>
  <div id="groupDiv">
    <ul>
      <li>Group 1</li>
      <li>Group 2</li>
      <li>Group 3</li>
    </ul>
  </div>
  
  <div id="userDiv">
    <ul>
      <li>User A</li>
      <li>User B</li>
      <li>User C</li>
    </ul>
  </div>
</body>
</html>

Start with checking the script load order and file paths—those are the quickest fixes. If those don't work, move on to version compatibility and checking your jQuery UI build.

内容的提问来源于stack exchange，提问作者Philip Karlsson