How to make it work: Dragula drag-and-drop on Meteor

Question

I've been trying to add a drag-and-drop functionality into my Meteor app using the Dragula library. It seems very simple and easy to use. However, even though I have followed the instructions and looked other examples from the web, I haven't been able to get it work. It doesn't generate any actual errors, but the <div> elements that I want to move just can't be moved.

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>

This is my first Meteor app, so I decided to use the same structure used by Meteor's tutorial, i.e. the JS and HTML files referenced above are placed in ../imports/ui/ and imported from there. I installed Dragula with npm and the dragula.js file is located in \node_modules\dragula.

EDIT: I was able to make it work by moving the code to the end of the HTML file, so the main reason must've been with the order in which the code is executed. It seems that onRendered() fires after the page has initially loaded and doesn't take account the templates, which are changed by JavaScript.

@Mikkel I added an import statement for `/node_modules/dragula/dragula.js`, but it didn't really change the situation. The file shows up in browser's debugger, though. — JohnTheAsker, Feb 09 '17 at 14:22

score 2 · Answer 1 · answered Feb 10 '17 at 00:21

2

The import statement shouldn't reference the node modules directory. See

https://guide.meteor.com/using-npm-packages.html#client-npm for details, basically you should just write

import dragula from 'dragula';

And the packaging system will work out where to find it for you.

There is/was a package on Atmosphere:

https://atmospherejs.com/ahref/dragula

Which does the work of importing for you, but the author recommends using npm as the way forward.

answered Feb 10 '17 at 00:21

Mikkel

7,693
3
17
31

1

Thanks for the info! Part of the problem seemed to be with the execution order, but found a temporary fix for that, so it works now. – JohnTheAsker Feb 10 '17 at 15:35

How to make it work: Dragula drag-and-drop on Meteor

1 Answers1