'TypeError: $(...).sortable is not a function'夏日笔记和可排序的冲突？

Question

我在我自己的CMS中使用SummerNote(https://summernote.org/(和sortable(https://jqueryui.com/sortable/(。

如果我不链接laravel的app.js，我会收到错误：unturefthe typeError：$(...(。summernote不是功能但是，我的可分配功能

但是当我链接app.js时，我会收到错误：Untuff typeError：$(...(。排序不是函数

我已经检查了加载jQuery和jQuery UI的顺序，这是正确的。

我在Google上发现的是，我需要在app.js中添加jQuery插件？但是我无法做到这一点。

布局刀片

  <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- when linked error with sortable, without error with summernote -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/summernote.js"></script>
    @yield('script')

edit.blade

@section('script')
  <script src="/js/sortable.js"></script>
@endsection
<div class="form-group">
                            <label for="content">Content:</label>
                            <textarea name="content" class="summernote" rows="10" cols="30">{{$project->content}}</textarea>
                        </div>
  <ul class="sortable-posts list-unstyled">
                        @foreach($imgs as $img)
                        <li class="list-group-item" id="{{ $img->id }}">
                            <img src="../../../{{$img->src}}" alt="" class="img-sortable">
                        </li>
                        @endforeach
                    </ul>

sortable.js

$(document).ready(function(){
  $(function() {
      $(".sortable-posts").sortable({
        placeholder: 'drop-placeholder',
          stop: function() {
              $.map($(this).find('li'), function(el) {
                  var id = el.id;
                  var sorting = $(el).index();
                  $.ajax({
                      url: '../../sortImgs',
                      type: 'GET',
                      data: {
                          id: id,
                          sorting: sorting
                      },
                  });
              });
          }
      });
  });
});

summernote.js

$(document).ready(function() {
  $('.summernote').summernote({
    toolbar: [
      // [groupName, [list of button]]
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['insert', ['video']],
      ['view'], ['codeview']
    ]
  });
});

有人想出了导致2之间冲突的原因吗？以及如何解决

Answer 1

您两次参考jQuery和Summernote。尝试更新您的引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<script src="/js/jquery-ui.min.js"></script>

Answer 2

解决方案正在从app.js中删除延期，并将链接放在页面底部SO

  <script src="/js/jquery-ui.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
  <script src="/js/summernote.js"></script>
  @yield('script')`