无法使 aurelia-dragula 插件工作答案

【问题标题】：Cannot get aurelia-dragula plugin to work无法使 aurelia-dragula 插件工作
【发布时间】：2016-10-15 15:35:25
【问题描述】：

我正在尝试查看aurelia-dragula plugin 以查看它是否满足我的需求，但是当我尝试拖动应该是可拖动元素时，什么也没有发生。我什至尝试过example，它也不起作用。

对于我的自定义测试，我使用 aurelia cli 创建了一个新项目，并且 npm 安装了 aurelia-dragula 1.2.6。这是我的代码：

aurelia.json

{
    "name": "aurelia-dragula",
    "path": "../node_modules/aurelia-dragula/dist/amd",
    "main": "dragula"
}

main.js

aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-dragula');

浏览器日志显示插件正在加载，所以我认为上面的一切都很好。

我将文档中的示例 html 和 javascript 用于自定义元素方法，如下所示：

app.html

<template>
    <dragula-and-drop drop-fn.call="itemDropped(item, target, source, sibling, itemVM, siblingVM)"></dragula-and-drop>
    <div class="drag-source drop-target">
      <div repeat.for="thing of things">
          <p style="background-color: red; color: white; width: 200px;"">${thing}</p>
      </div>
    </div>
</template>

app.js

export class App {
    constructor() {
      this.things = ['1', '2', '3', '4'];
    }

    itemDropped(item, target, source, sibling, itemVM, siblingVM) {
      //do things in here
    }
}

【问题讨论】：

我已经从 github 下载、安装、构建和运行示例——它在 Firefox 中运行良好。检查您的浏览器是否有错误。在 Firefox 中，您可以按打开 JavaScript 控制台。
@JayDi 浏览器控制台中没有错误。我从 github 下载了示例并再次尝试。这次奏效了。不知道为什么。我仍然无法使用 Aurelia CLI 在我自己的测试项目中使用它。
dragula中有一些资源：尝试在aurelia.json中的dragula依赖中添加该行：“resources”：[“dragula.css”]
@JayDi 那也没用。
@MatthewJamesDavis 这就是我正在做的。谢谢。

标签： aurelia

【解决方案1】：

你没有忘记导入吗？

import {Dragula} from 'aurelia-dragula';

【讨论】：

【解决方案2】：

问题出在您的 aurelia.json 文件中。试试这个：

{
   "name": "aurelia-dragula",
   "path": "../node_modules/aurelia-dragula/dist/amd",
   "main": "index"
}

【讨论】：

【解决方案3】：

我知道这肯定有点晚了，但如果有人遇到同样的问题，这里是 aurelia-dragula 的正确 aurelia.json 设置：

{
    "name": "aurelia-dragula",
    "path": "../node_modules/aurelia-dragula/dist/amd",
    "main": "index",
    "resources": [
        "*.js",
        "*.html",
        "*.css"
    ]
}

问题是没有加载资源。其实我也不知道为什么，因为我以为所有的插件内容（对应path）都会被捆绑加载，但现在看来不是这样的。

话虽如此，aurelia-cli 已经改进，现在提出了一个import 命令，这很棒。你只需 npm install 你的库，然后 au import 它，它会填充 aurelia.json 文件。但是，有时您需要进行一些手动调整，例如这个；我想知道为什么这个导入命令没有正确填充aurelia.json 部分。

希望这会有所帮助！ :-)

【讨论】：