0

我正在尝试在流星中使用 sortablejs 来动态创建包含可以从列表移动到列表的项目的列表。

我是这样安装的meteor npm install sortablejs --save

当div 在列表组 div内时，它正在<div class="list-group">使用多个 draggable ，但如果我在外部使用 以编程方式创建多个列表组 div，它就不起作用。<div class="list-group-item>{{#each...{{#each...

这是列表组 div内部{{#each...的示例代码：

<div class="list-group" id="unassignedCensusTracts" style="cursor: move">
    {{#each censusTractsInTerritory "rec3UvlTOifMbsmnq"}}`

                    <div class="list-group-item">{{number}} ({{county}})
                        <BR> confirmed: {{confirmedQty}} |
                        unconfirmed: {{unconfirmedQty}}
                   </div>
    {{/each}}
</div>

这是列表组 div外部{{#each...的非工作代码：

{{#each territories}}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{county}}{{number}}</h3>
            </div>
            <div class="panel-body">
                <div class="list-group" id="censusTractsInTerritory{{@index}}" style="cursor: move">
                    {{#each censusTractsInTerritory _id}}
                        <div class="list-group-item">{{number}} | #{{qty}}</div>
                    {{/each}}
        </div>
    </div>
    <div class="panel-footer">confirmed: {{confirmedQty}} | total: {{contactsQty}}</div>
    </div>
{{/each}}

这是模板...onRendered 函数：

Template.makeTerritories.onRendered(function () {
    console.log(this)
    // debugger
    Sortable.create(document.getElementById('unassignedCensusTracts'),
        {
            group: {
                pull: true,
                put: true,
                name: 'unassignedCensusTracts'
            },
            sort: false,
            ghostClass: 'ghost'
        }
    )
    // debugger
    Sortable.create(document.getElementById('censusTractsInTerritory0'),
        {
            group: {
                pull: true,
                put: true,
                name: 'censusTractsInTerritory0'
            },
            sort: false,
            ghostClass: 'ghost',
        }
    )
    debugger
})

请注意，浏览器不会在调试器上暂停，所以我猜第二个 Sortable.create 失败了。控制台中的错误是：

Exception from Tracker afterFlush function: meteor.js?hash=e3f53db…:932
undefined
4

0 回答 0