为什么我的拖放列表在HTML中不起作用？

Question

我正在Flask应用程序中添加一个拖放列表。但是，该列表不可拖动。我的编码有什么问题？

我尝试使用jquery-sortable.js库。

home.html中的代码：

{% extends "layout.html" %}
{% block content %}
    <script type="text/javascript">
        $(function() {
            $("ol.list-group-sortable").sortable();
         });
    </script>

    <div class="content-section">
        <ol class="list-group list-group-sortable" method="POST" action="">
        {% for item in things_to_sort %}
            <li class="list-group-item" id="Item-{{ item }}">{{ item }}</li>
        {% endfor %}
        </ol>
    </div>


{% endblock content %}

layout.html中的代码：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='jquery-sortable.js') }}"></script>

呈现的html：

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="/static/jquery-sortable.js"></script>

<main role="main" class="container">
  <div class="row">
    <div class="col-md-8">

    <script type="text/javascript">
    $(function() {
        $("ol.list-group-sortable").sortable();
    });
    </script>

<div class="content-section">
    <ol class="list-group list-group-sortable" method="POST" action="">

        <li class="list-group-item" id="Item-Test">Test</li>

        <li class="list-group-item" id="Item-Testing">Testing</li>

        <li class="list-group-item" id="Item-Hi">Hi</li>

    </ol>
</div>

    </div>
  </div>
</main>