Use of Dragula.js in a meteor app

help
1

Is anyone use Dragula.js in their meteor app ?

I am looking for some feedback on how to integrate Dragula in my app.

2 Likes
2

I’ve never used it myself, but perhaps advise would depend on how you plan on using Dragula. In any case, I would say integrate it via npm. That to me seems like the easiest. I don’t see a package in atmosphere for it, so I may end up creating one here soon. http://www.meteorpedia.com/read/npm

3

You would probably set up your Dragula in the onRendered function of your template:

// Untested

Template.yourTemplate.onRendered(function () {
  this.drake = dragula(this.find('#container-1'), this.find('#container-2'));
});

// Remember to tear down
Template.yourTemplate.onDestroyed(function () {
  this.drake.destroy();
});
4

Yes I played with dragula a few days ago [code], because I was looking at an alternative to jquery-ui to handle sortable lists in Libreboard.

Dragula works perfectly well with meteor. One issue I had with other similar libs is that by modifying the DOM (eg moving a node element somewhere else) they tell Blaze to stop handling reactive updates to the concerned element. This does not happen with dragula, because dragula gracefully handle DOM updates.

At the end I didn’t switch to dragula because it was not powerful enough for Libreboard and the API doesn’t match our model very well (for instance you need to maintain a list of containers elements and you can’t rely on a CSS class as in other libs). I also played with sortable:sortable but it also missed features we need in LibreBoard.

2 Likes
5

Hi, and what with: https://atmospherejs.com/rubaxa/sortable Have you tried with this one?
I’m curious of your opinion…

1 Like
6

I’ve used this. It’s pretty straight forward, even got some nice examples for Meteor

7

Used rubaxa/sortable too for 3-4 times. It works very nice with Meteor.

1 Like
8

Tanks @mquandalle for your answer, but in my case I want to be able to drag an item and be able to click on it to make a modal appears but it seems that dragula can’t make a difference between drag and click !

Because when I use dragula on an item the click event don’t work anymore

9

why is there a need to tear down? Is this true to all unpackaged library?

10

care to share your example on github?

11

The event handlers need to be cleaned up when you’re no longer using it. Because Meteor apps essentially don’t reload (unless done so via autoupdate), it is your responsibility to clean up the memory when it’s not being used. Normally you wouldn’t have to when you’re developing non-SPAs because they reload as your navigate through the site.

12

How would you access the containers that youve dragged to? say into an array of strings?