Jquery .draggable不是一个函数。

Question

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

"Uncaught：$(.).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>

伙计们，我真的需要你们的帮助。提前谢谢。

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

希望这行得通！

更多信息：jQuery UI - Draggable is not a function?