Как заставить это работать: Dragula drag-and-drop на Meteor

Я пытаюсь добавить функцию перетаскивания в приложение Meteor с помощью библиотеки Dragula. Это кажется очень простым и простым в использовании. Однако, хотя я следил за инструкциями и смотрел другие примеры из Интернета, я не смог заставить его работать. Он не генерирует никаких реальных ошибок, но элементы <div>, которые я хочу переместить, не могут быть перемещены.Как заставить это работать: Dragula drag-and-drop на Meteor

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>

Это мое первое приложение Метеор, поэтому я решил использовать ту же структуру, используемую обучающей метеора, т.е. JS и HTML файлы, указанные выше размещаются в ../imports/ui/ и импортируются оттуда. Я установил Dragula с npm, а файл dragula.js находится в \ node_modules \ dragula.

EDIT: Мне удалось заставить его работать, перемещая код до конца HTML-файла, поэтому основная причина должна заключаться в том порядке, в котором выполняется код. Это seems, что onRendered() срабатывает после первоначальной загрузки страницы и не учитывает шаблоны, которые изменены JavaScript.

источник

2017-02-08 JohnTheAsker

Вы не являетесь пользователем Dragula в своем коде. – Mikkel

@Mikkel Я добавил оператор импорта для '/ node_modules/dragula/dragula.js', но это не изменило ситуацию. Однако файл отображается в отладчике браузера. – JohnTheAsker

Оператор import не должен ссылаться на каталог узлов. См

https://guide.meteor.com/using-npm-packages.html#client-npm для деталей, в основном, вы должны просто написать

import dragula from 'dragula';

И упаковочная система будет работать, где найти его для вас.

Существует/был пакет в атмосфере:

https://atmospherejs.com/ahref/dragula

Что делает работу импорта для вас, но автор рекомендует использовать НПМ как путь вперед.

источник

2017-02-10 00:21:53 Mikkel

Спасибо за информацию! Часть проблемы, похоже, была связана с порядком выполнения, но для этого была найдена временная ошибка, поэтому она работает сейчас. – JohnTheAsker

Как заставить это работать: Dragula drag-and-drop на Meteor

ответ

Смежные вопросы