Cannot get aurelia-dragula plugin to work

0
votes

I am trying to check out the aurelia-dragula plugin to see if it meets my needs, but when I attempt to drag what should be a draggable element, nothing happens. I have even tried the example and it doesn't work either.

For my custom test, I created a new project using the aurelia cli and npm installed aurelia-dragula 1.2.6. Here's my code:

aurelia.json

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

main.js

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

The browser log shows the plugin as being loaded, so I assume all is well with the above.

I used the sample html and javascript from the documentation for the custom-element approach, like so:

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
    }
}
3
aurelia
I've download, install, build and run example from github -- it's work fine in Firefox. Check your browser for errors. In firefox you can press <CTRL+SHIFT+J> for open javascript console. - JayDi
@JayDi There were no errors in the browser console. I downloaded the example from github and tried again. This time it worked. No idea why. I still can't get it to work in my own test project using Aurelia CLI. - Jeff G
There are some resources in dragula: try to add that line in dragula dependency in aurelia.json: "resources": ["dragula.css"] - JayDi
@JayDi That didn't work either. - Jeff G
@MatthewJamesDavis That's what I am doing. Thanks. - Jeff G

3 Answers

0
votes

Didn't you forget the import?

import {Dragula} from 'aurelia-dragula';
0
votes

The problem is in your aurelia.json file. Try this:

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

I know it's certainly a bit late, but if anyone has the same problem, here is the correct aurelia.json setting for aurelia-dragula :

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

The problem is that resources were not loaded. Actually I don't know why because I thought that all the plugin content (corresponding to the path) would be bundled and loaded, but it seems that it is not the case.

That being said, aurelia-cli has improved and now proposes an import command, which is great. You just npm install your library and then au import it, which fills the aurelia.json file. However, you sometimes need to make some manual adjustments, as this one ; I wonder why this import command does not fill properly the aurelia.json part.

Hope this helps ! :-)