Question

我一直在尝试使用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() <div class="w3-container w3-card-2 w3-white w3-margin-bottom"> <div class="w3-container"> some stuff` <button data-toggle="collapse" data-target="#demo">More info</button> <div id="demo" class="collapse">` <div id="chart_div" style="">0</div> </div> </div> </div> <div class="w3-container w3-card-2 w3-white w3-margin-bottom"> <div class="w3-container"> some stuff` <button data-toggle="collapse" data-target="#demo1">More info</button> <div id="demo1" class="collapse">` <div id="chart_div" style="">1</div> </div> </div> </div> <div class="w3-container w3-card-2 w3-white w3-margin-bottom"> <div class="w3-container"> some stuff` <button data-toggle="collapse" data-target="#demo2">More info</button> <div id="demo2" class="collapse">` <div id="chart_div" style="">2</div> </div> </div> </div>在页面最初加载后触发，并且不考虑由JavaScript更改的模板。

Answer 1

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

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

import dragula from 'dragula';

包装系统将找到适合您的地方。

Atmosphere上有一个包：

https://atmospherejs.com/ahref/dragula

为您导入的工作是哪一项，但作者建议使用npm作为前进的方法。

如何使它工作：Dragula拖放Meteor

1 个答案: