Ich habe versucht, eine Drag-und-Drop-Funktionalität in meine Meteor App mit der Dragula-Bibliothek hinzuzufügen. Es scheint sehr einfach und einfach zu bedienen. Obwohl ich die Anweisungen befolgt und andere Beispiele aus dem Internet angeschaut habe, war ich nicht in der Lage, es zum Laufen zu bringen. Es erzeugt keine tatsächlichen Fehler, aber die <div> Elemente, die ich verschieben möchte, können nicht verschoben werden.Wie es funktioniert: Dragula Drag-and-Drop auf 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>
Dies ist mein erstes Meteor-App, so habe ich beschlossen, die gleiche Struktur von Meteor Tutorial zu verwenden, dh die JS und HTML-Dateien, die oben referenzierten werden in ../imports/ui/ platziert und von dort importiert. Ich habe Dragula mit npm installiert und die Datei dragula.js befindet sich in \ node_modules \ tagula.
EDIT: Ich konnte es machen, indem Sie den Code an das Ende der HTML-Datei verschieben, so dass der Hauptgrund mit der Reihenfolge gewesen sein muss, in der der Code ausgeführt wird. Es seems das onRendered() feuert, nachdem die Seite anfänglich geladen wurde und die Vorlagen nicht berücksichtigt, die von JavaScript geändert werden.
Sie scheinen Dragula nicht in Ihren Code zu importieren. – Mikkel
@Mikkel Ich habe eine Importanweisung für '/ node_modules/tagula/dragula.js' hinzugefügt, aber das hat die Situation nicht wirklich verändert. Die Datei wird jedoch im Debugger des Browsers angezeigt. – JohnTheAsker