我一直在尝试使用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/

10-10 10:51