如何讓它工作：在流星上的Dragula拖放

我一直在嘗試使用Dragula庫爲我的Meteor應用程序添加拖放功能。它看起來非常簡單易用。但是，即使我遵循了指示並查看了網絡上的其他示例，但我無法使其工作。它不會生成任何實際的錯誤，但我想移動的<div>元素不能移動。如何讓它工作：在流星上的Dragula拖放

JS：

import { Template } from 'meteor/templating'; 
import './body.html'; 

if (Meteor.isClient) { 

    Meteor.startup(function() { 
    Session.set("view", "titleScreen"); 
    }); 

    Template.body.helpers({ 
    template_name: function() { 
     return Session.get("view"); 
    } 
    }); 
    //click event to change view from title screen to main screen 
    Template.body.events({ 
    'click .changeScreen': function (e) { 
     e.preventDefault(); 
     Session.set("view", "mainScreen"); 
     var selectedView = Session.get('view'); 
     console.log(selectedView); 
    } 
    }); 
    //drag and drop the contents of divs 'move1' and 'goal1'? 
    Template.body.onRendered(function() { 
    dragula([document.getElementById('move1'), document.getElementById('goal1')]); 
    }); 
}

HTML：

<body> 
    {{> Template.dynamic template=template_name}} 
</body> 
<template name="plcHolder"> 
    {{view}} 
    {{#if view "title"}} 
     {{> titleScreen}} 
    {{else}} 
     {{> mainScreen}} 
    {{/if}} 
</template> 
<template name="titleScreen"> 
<!--here would be the contents of the title screen, like some text and a button--> 
</template> 
<template name="mainScreen"> 
    <div class="container"> 
    <div id="goal1" class="goalBoxBG"> 
    <div class="goalBox"></div></div> 
<!--...--> 
    <div id="move1" class="moveBoxBGL"> 
    <div class="moveBox"></div></div> 
<!--...--> 
    </div> 
</template>

這是我第一次流星的應用程序，所以我決定使用由流星的教程中使用相同的結構，即JS和上面提到的HTML文件放在../imports/ui/中並從那裏導入。我用npm安裝了Dragula，dragula.js文件位於\ node_modules \ dragula中。

編輯：我是能夠使通過移動代碼的HTML文件的工作進行到底，所以最主要的原因一定是在其中執行代碼的順序。它seemsonRendered()在頁面最初加載後觸發，並且不考慮由JavaScript更改的模板。

來源

2017-02-08 JohnTheAsker

您似乎沒有在您的代碼中導入Dragula。 – Mikkel

@Mikkel我增加了一個import語句'/ node_modules/dragula/dragula.js'，但它並沒有真正改變局面。不過，該文件顯示在瀏覽器的調試器中。 – JohnTheAsker