0
私は、Dragulaライブラリを使用して、メーターアプリにドラッグアンドドロップ機能を追加しようとしています。それは非常に簡単で使いやすいようです。しかし、私が指示に従って、ウェブから他の例を見ても、私はそれを働かせることができませんでした。実際のエラーは発生しませんが、移動したい要素のうち移動することができないのは<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/に配置され、そこからインポートされます。 Dragulaをnpmでインストールし、dragula.jsファイルは¥node_modules¥dragulaにあります。
EDIT：コードをHTMLファイルの最後に移動することで動作させることができました。主な理由は、コードが実行された順序であったはずです。 seemsページが最初にロードされた後にonRendered()が起動し、JavaScriptによって変更されるテンプレートは考慮されません。
コードにDragulaをインポートしていないようです。 – Mikkel
@Mikkel '/ node_modules/dragula/dragula.js'のimport文を追加しましたが、実際は状況を変更しませんでした。しかし、ファイルはブラウザのデバッガに表示されます。 – JohnTheAsker