Jquery .draggable is not a function

Question

Hello everyone I'm trying to create a draggable and resizable function in my laravel framework using jquery. And each time I reload the page this error keeps on showing in my console

"Uncaught TypeError: $(...).draggable is not a function"

which make the function not to be working. Here is my code

<link rel="stylesheet" href="{{asset('dasharea/css/jquery-ui.css')}}">
<style>
  #containment-wrapper {
    border: 2px solid #ccc;
    position: relative;
    overflow: hidden;
  }
  
  #containment-wrapper .box {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    position: absolute;
    border: 1px solid grey;
    cursor: move;
  }
</style>

<script src="{{asset('dasharea/js/jquery-3.6.0.js')}}"></script>
<script src="{{asset('dasharea/js/jquery-ui.js')}}"></script>
<script>
  $(document).ready(function() {
    $(".box").draggable({
      containment: "#containment-wrapper"
    }).resizable({
      containment: "#containment-wrapper"
    });
  });
</script>

<div id="containment-wrapper" class="meta-builder ui-widget-content">
  <img src="{{asset('dasharea/img/placeholder.png')}}" id="cover" style="max-width: 750px;" />
  <div class="box"></div>
  <div id="name-builder" class="nm_controls pv_controls name-builder">Dummy Name</div>
</div>

Please guys I really need your assistance. Thanks in advance.

Answer 1

Please replace

<script src="{{asset('dasharea/js/jquery-3.6.0.js')}}"></script>
<script src="{{asset('dasharea/js/jquery-ui.js')}}"></script>

to

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

Hope this works!

More information: jQuery UI - Draggable is not a function?