symfony 6 可排序行与 sortable.js

Question

在我看来我有

<table class="table table-striped bg-white table-sm">
        <thead>
        <tr>
            <th scope="col">Název</th>
            <th scope="col">Text</th>
            <th scope="col">Pořadí</th>
            <th scope="col">Smazat</th>
        </tr>
        </thead>
        <tbody class="list-group" id="listWithHandle">
        {% for userSample in samples %}
            <tr class="list-group-item">
                <td>
                    <span class="glyphicon glyphicon-move" aria-hidden="true"></span></td>
                Drag me by the handle
                <td class="pe-5">{{ userSample.sample.name }}</td>
                <td class="pe-5">{{ userSample.sample.text }}</td>
                <td class="pe-5">{{ userSample.position}}</td>
                <td class="pe-5"><td><a href="{{ path('delete_user_template', {id: userSample.id}) }}"><i class="fa fa-trash"></i></a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

我尝试表中的行可以通过拖放来重新排序。我发现 javascipt 库 Sotrable.js 看起来非常好https://github.com/SortableJS/Sortable。在 symfony 中，我使用 webpack encore，我通过 napm 安装可排序，在我的 app.js 中我有一行

import Sortable from 'sortablejs';

但是编译后在控制台中我看到错误

未定义可排序 看来我有块

<script>
        // Simple list
        Sortable.create(simpleList, { /* options */ });

        // List with handle
        Sortable.create(listWithHandle, {
            handle: '.glyphicon-move',
            animation: 150
        });

但是可排序不是功能

Answer 1

您需要将 Sortable 变量放在全局范围内以便稍后访问它：

在您的入口点（app.js）中您可以执行以下操作：

import Sortable from 'sortablejs';
window.Sortable = Sortable

然后您将能够在内联脚本中访问它