我一直在尝试使用Dragula库将拖放功能添加到我的Meteor应用程序中。看起来非常简单易用。但是,即使我已按照说明进行操作并在网络上查看了其他示例,也无法使其正常运行。它不会产生任何实际错误,但是我要移动的<div>
元素无法移动。
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>
这是我的第一个Meteor应用程序,因此我决定使用与Meteor教程相同的结构,即,上面引用的JS和HTML文件放在../imports/ui/中,并从那里导入。我使用npm安装了Dragula,并且dragula.js文件位于\ node_modules \ dragula中。
编辑:我能够通过将代码移到HTML文件的末尾来使其工作,所以主要原因必须与执行代码的顺序有关。页面最初加载后
onRendered()
会触发seems,并且不考虑由JavaScript更改的模板。 最佳答案
import语句不应引用节点模块目录。看到
https://guide.meteor.com/using-npm-packages.html#client-npm有关详细信息,基本上您应该只写
import dragula from 'dragula';
包装系统将为您找到在哪里找到它。
在大气层上有一个包装:
https://atmospherejs.com/ahref/dragula
哪个可以为您完成导入工作,但是作者建议使用npm作为前进的方向。
关于javascript - 运作方式:Dragula在Meteor上的拖放,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42120873/