Search code examples
javascripthtmljqueryjquery-ui-sortablesortablejs

$(...).sortable is not a function

I have imported the sortable and jquery references to my html, however, it says that

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

and

Uncaught Error: jQuery is required for jquery-sortablejs

I have never used jquery before hence new to this all. I have taken this exact code as a demo of this website, and it is working on code pen, however wont work on my own laptop.

$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(';');

    console.log({
      id: changedList,
      positions: positions
    });
  }
});
<html> 
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>




<body> 

<h1> Rank Images</h1>

<ul id="image-list1" class="sortable-list">
    <li id="a">A</li>
    <li id="b">B</li>
    <li id="c">C</li>
  </ul>


</body>
</html>

Solution

  • The issue with your code is due to the order of the script references. Any script which relies on jquery.js has to be included in the page after jQuery. In addition you're including two versions of jQuery which can cause issues. I'd suggest keeping 3.5.1 and removing 1.12.4. Try this:

    $('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(';');

    console.log({
      id: changedList,
      positions: positions
    });
  }
});
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>

<h1> Rank Images</h1>
<ul id="image-list1" class="sortable-list">
  <li id="a">A</li>
  <li id="b">B</li>
  <li id="c">C</li>
</ul>