Create drag and drop widget dashboard


#1

Hi guys I’m really new to meteor and wanted to create a simple dashboard prototype where I can add / delete widgets, resize and order them using drag and drop.

I’ve seen JS libraries that seem to provide a good starting point like:

Gridster: http://gridster.net/
GridList: https://github.com/hootsuite/grid

But how do I implement the same functionality those libraries provide into meteor?

Would appreciate any help. Thanks in advance.

Best wishes
12$


#2

You could just use one of those libraries. To get them working in Meteor, create a /client/compatibility directory (explained here), and put the javascript file for whichever plugin you use in there. You can put the css for the plugin anywhere that will load it to the client (e.g. simply in /client). You may need to add the jquery package if you haven’t already (meteor add jquery).

To use the plugin, you will need to call it from Template.templateName.onRendered() (explained here). For example, if using gridster:

Template.myGrid.onRendered(function() {
    this .$(".gridster ul").gridster().data('gridster');
});

That should do it. Someone actually created a wrapper package for gridster: https://atmospherejs.com/matteodem/gridster So you can even use that in which case you don’t need to add the plugin files or jquery yourself.

Let me know if you have any questions.