This is my first experience with Meteor and Dragula. I'm trying to do a dynamic list, with database data. What I need is:
To mount the 'divs' with the data from database
To become these 'divs' draggable
"To insert" some itens "inside" these 'divs' (from database to)
To become these itens draggable, inside the 'divs' and between other 'divs'
To resume, is something like columns and cards in Trello.
I'm using Dragula and, first, I saw the documentation here, and this and this examples.
To solve the numbers 1 and 2, I'm trying this code.
And, the situation now is: the 'drake' contain the array with lists name, but I can't 'transform' them in 'divs'.
The result in the log is:"element: (3) [{…}, {…}, {…}]
main.js:36 counter: 3
main.js:39 i: 0
main.js:41 listName: Lista 1
main.js:39 i: 1
main.js:41 listName: Lista 2
main.js:39 i: 2
main.js:41 listName: Lista 3
main.js:45 dragula: {containers: Array(3), start: ƒ, end: ƒ, cancel: ƒ, remove: ƒ, …}
containers: (3) ["Lista 1", "Lista 2", "Lista 3"]"
Can you help me ?
Thank you a lot.
PS1: the "draglist template" is only to show that Dragula is working.
PS2: sorry for English mistakes.
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import dragula from 'dragula';
import '../node_modules/dragula/dist/dragula.css';
import './main.html';
Listas = new Mongo.Collection('listas');
Tarefas = new Mongo.Collection('tarefas');
console.log("Before enter drag");
Template.dragList.onRendered(function(){
console.log("entrou no onRendered");
dragula([document.querySelector('#left1'), document.querySelector('#right1')]);
});
Template.lists.helpers({
'list': function(){
return Listas.find({});
},
'tasks': function(){
return Tarefas.find({});
},
'mount': function(){
console.log("Inside mount");
var drake = dragula({});
var element = Listas.find({}).fetch();
var counter = Listas.find({}).count();
console.log("element: ", element);
console.log("counter: ", counter);
var i;
for (i = 0; i < counter; i++) {
console.log("i: ", i);
var listName = element.[i].nome;
console.log("listName: ", listName);
drake.containers.push(listName);
// dragula([document.getelemententById(listName)]);
};
console.log("dragula: ", drake);
},
});<head>
<title>Dragula test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h1>Welcome to Meteor!</h1>
<h1>Draglist</h1>
{{> dragList}}
<br>
<h1>Lists</h1>
{{> lists}}
<br>
</body>
<template name="dragList">
<h5 class="card-title">Container 1</h5>
<div id="left1">
<p class="card-text">This is a draggable p</p>
<button class="btn btn-primary">First draggable button</button>
<button class="btn btn-primary">Second draggable button</button>
</div>
<h5 class="card-title">Container 2</h5>
<div id="right1">
<p class="card-text">This is another draggable p</p>
<button class="btn btn-primary">Third draggable button</button>
<button class="btn btn-primary">Fourth draggable button</button>
</div>
</template>
<template name="lists">
<div id=container>
{{mount}}
</div>
</template>