Как сделать перетаскивание с помощью Dragula в метеоре
Я хочу перетащить pbox(окно проекта) по горизонтали и jbox(окно задания) по вертикали. wandisco и cloudera - это платформы, а sp1, sp2 - релизы, CEI,CQI - проекты, а вкладки с зеленым, красный и желтый - рабочие места. status.html:
<div class="example tabClick">
<div class="ui two item inverted small menu" style="margin:0 0.5%">
<a class="item active selected sbtn1" data-tab="wan"><h4>Wandisco</h4></a>
<a class="item sbtn2" data-tab="second"><h4>Cloudera</h4></a>
</div>
<div class="ui small tab active" data-tab="wan" id="outer">
<div class="ui top active attached blue tiny tabular menu">
{{#each listRelease}}
<a class="item" data-tab="wan/{{this.release}}"><h4>{{this.release}}</h4></a>
{{/each}}
</div>
{{#each listRelease}}
<div class="ui bottom attached rel tab menu" data-tab="wan/{{this.release}}">
<div class="ui menu grids" style="margin-top:0; id="pbox">
{{#each listProjName this.release}}
<div class=" column equal width aligned padded center aligned">
<div class="ui vertical allifluid menu" id="jbox"><center><p><h4>{{this.project}}</h4></p></center>
{{#each listjobName this.release this.project}}
<div class="ui jbox small menu" style="background-color:{{getStatusColor buildStatus}}; padding-top: 5px; padding-right: 3px; padding-bottom: 5px; padding-left: 8px;">
<p class="under"><h5>{{job}}</h5></p>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
</div>
status.js
Template.status.onRendered (function(){
dragula([document.querySelector('#pbox')]);
dragula([document.querySelector('#jbox')]);
});
что не так в коде? Драгула не работает.