Dragula with Meteor - 不显示“div”

编程问答 2022-05-22

问题描述

这是我第一次使用 Meteor 和 Dragula。 我正在尝试使用数据库数据做一个动态列表。 我需要的是：

  1. 使用数据库中的数据挂载“div”

  2. 成为这些“div”可拖动

  3. 在这些“div”的“内部”“插入”一些元素（从数据库到）

  4. 为了使这些 itens 可拖动，在“div”内部和其他“div”之间
    恢复，类似于 Trello 中的列和卡片。
    我正在使用 Dragula，首先，我看到了文档 here、this 和 this 示例。
    为了解决数字 1 和 2，我正在尝试此代码。
    而且，现在的情况是：“drake”包含带有列表名称的数组，但我无法在“divs”中“转换”它们。
    日志中的结果是：

    "元素：(3) [{…},{…},{…}]
    main.js:36 计数器：3
    main.js:39 i: 0
    main.js:41 列表名称：列表 1
    main.js:39 i: 1
    main.js:41 列表名称：列表 2
    main.js:39 i: 2
    main.js:41 列表名称：列表 3
    main.js:45 dragula: {containers: Array(3),start: ƒ,end: ƒ,cancel: ƒ,remove: ƒ,...}
    容器：(3) ["Lista 1","Lista 2","Lista 3"]"

你能帮我吗？
非常感谢。
PS1：“draglist 模板”只是为了表明 Dragula 正在工作。
PS2：抱歉英文错误。

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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dragulajavascriptmeteormeteormeteor