13

I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?

The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?

bevacqua
  • 47,502
  • 56
  • 171
  • 285
IAmTimCorey
  • 16,412
  • 5
  • 39
  • 75
  • 1
    Skimming through the source it looks like the `dist/angular-dragula.js` depends on require but the minified version might not. Have you tried using the minified version to see if it works? – yvesmancera Nov 16 '15 at 21:16
  • 1
    Yeah, I did and it didn't seem to work. Part of the problem is that it also expects to be initialized by passing in angular so I'm having a hard time just including it as a dependency in angular. – IAmTimCorey Nov 16 '15 at 21:26
  • 2
    I think you can pass it an instance of the global variable `angular` , since `require('angular')` would return that anyway. – yvesmancera Nov 16 '15 at 22:10
  • 1
    Try [AMD clean](https://www.npmjs.com/package/amdclean). Let us know if that works. – georgeawg Nov 16 '15 at 22:41
  • 1
    I posted my answer below. We can bypass require if everything is loaded in the right order and you use the variable names the author created. As for AMD clean, I did not get to the point of trying that. Thanks for the help everyone. – IAmTimCorey Nov 17 '15 at 14:49

1 Answers1

24

OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:

  1. Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
  2. When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
  3. Use dragula as you normally would. If you need to access the service, the name would be angularDragula.

For example, here is my declaration of app:

var app = angular.module('app', [
  'ngRoute',
  angularDragula(angular)
]);

And then to get a simple list to be drag and drop capable, this is my html:

<div dragula='"bag-one"' dragula-model="vm.items">
    <div ng-repeat="item in vm.items">{{ item }}</div>
</div>

Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.

IAmTimCorey
  • 16,412
  • 5
  • 39
  • 75
  • I'm trying this in my ionic app. I don't explicitly load angular in my index.html, ionic handles it. Does that change how I would do this? Doing as you describe `angularDragula` returns `function register(angular) {...` but calling it errors `cannot read property 'module' of undefined` at `var app = angular.module('dragula', ['ng']);` – Brad W Jun 08 '16 at 16:46
  • I'm loading `dist/angular-dragula.js` after ionic but before my `app.js` and declaring `angularDragula(angular)` in my `app.js` dependencies(I've tried both before and after the ionic dependency is loaded with no difference). – Brad W Jun 08 '16 at 16:56
  • 1
    nevermind It was working. I wasn't passing the correct dependency to my controller(dragulaService). Thanks for the great solution! – Brad W Jun 08 '16 at 19:09
  • yes, it works! but now all my tests are failing: Error: ReferenceError: Can't find variable: angularDragula – bokkie Mar 07 '18 at 16:30