'TypeError: $(...).sortable is not a function' summernote and sortable conflict?

Question

我在自己的cms项目中使用summernote (https://summernote.org/) and sortable (https://jqueryui.com/sortable/)。

如果我不 link 来自 laravel 的 app.js 我得到错误：未捕获的类型错误：$(...).summernote 不是函数但是然后我的可排序功能应该

但是当我 link app.js 我得到错误：未捕获的类型错误：$(...).sortable 不是函数

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

我在 google 上发现我需要在 app.js 中添加 jquery 插件可排序？但我无法让它工作。

布局blade

  <!-- 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']
    ]
  });
});

有人知道是什么导致了两者之间的冲突吗？以及如何解决

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 中删除延迟并将链接放在页面底部

  <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')`

'TypeError: $(...).sortable is not a function' summernote and sortable conflict?

'TypeError: $(...).sortable is not a function' summernote and sortable conflict?

jquery

jquery-ui

jquery-ui-sortable

summernote

laravel-5