Jquery .draggable 不是一个函数答案

【问题标题】：Jquery .draggable is not a functionJquery .draggable 不是一个函数
【发布时间】：2022-01-11 15:49:58
【问题描述】：

大家好，我正在尝试使用 jquery 在我的 laravel 框架中创建一个可拖动且可调整大小的函数。每次我重新加载页面时，这个错误都会一直显示在我的控制台中

“未捕获的类型错误：$(...).draggable 不是函数”

这使该功能无法正常工作。这是我的代码

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

各位，我真的需要你们的帮助。提前致谢。

【问题讨论】：

这个错误告诉你 jquery-ui.js 没有正确加载。确保没有类型错误
欢迎来到 Stack Overflow。请查看生成的 HTML（查看源代码）并在您的帖子中包含您在 <script src="{{asset('dasharea/js/jquery-ui.js')}}"></script> 中看到的 src 的值

标签： javascript html jquery css jquery-ui

【解决方案1】：

请更换

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

到

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

希望这行得通！

【讨论】：