如何使其工作：在 Meteor 上拖放 Dragula答案

【问题标题】：How to make it work: Dragula drag-and-drop on Meteor如何使其工作：在 Meteor 上拖放 Dragula
【发布时间】：2017-02-08 18:27:25
【问题描述】：

我一直在尝试使用 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 文件的末尾来使其工作，所以主要原因一定是代码的执行顺序。 seems onRendered() 在页面初始加载后触发并且不考虑由 JavaScript 更改的模板。

【问题讨论】：

您似乎没有在代码中导入 Dragula。
@Mikkel 我为/node_modules/dragula/dragula.js 添加了一个导入语句，但这并没有真正改变这种情况。不过，该文件会显示在浏览器的调试器中。

标签： javascript html user-interface meteor dragula

【解决方案1】：

import 语句不应引用节点模块目录。见

https://guide.meteor.com/using-npm-packages.html#client-npm详情，基本上你就写吧

import dragula from 'dragula';

包装系统会帮你找到它。

Atmosphere 上有/曾经有一个包：

https://atmospherejs.com/ahref/dragula

为你做导入的工作，但作者建议使用 npm 作为前进的方向。

【讨论】：

感谢您的信息！部分问题似乎与执行顺序有关，但找到了一个临时解决方案，所以它现在可以工作了。