0

我一直在尝试使用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()并且不考虑由 JavaScript 更改的模板。

4

1 回答 1

2

导入语句不应引用节点模块目录。看

https://guide.meteor.com/using-npm-packages.html#client-npm了解详情，基本上你应该只写

import dragula from 'dragula';

包装系统将为您找出在哪里可以找到它。

Atmosphere 上有/曾经有一个包：

https://atmospherejs.com/ahref/dragula

哪个为您完成导入工作，但作者建议使用 npm 作为前进的方向。

于 2017-02-10T00:21:53.320 回答