Leveraging Angular Dragula without the need for RequireJS

Question

Leveraging Angular Dragula without the need for RequireJS

I'm eager to incorporate Drag and Drop functionality into my Angular project with the help of the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it appears that this module heavily relies on RequireJS. My experience with RequireJS is limited to just a few sample applications in the past. Is there a simple way to disentangle RequireJS from this module?

The creator seems to believe that it's a straightforward process (https://github.com/bevacqua/angular-dragula/issues/23), and has dismissed similar queries without providing a clear explanation. As I analyze the code, I can't seem to figure out how to integrate the module without introducing RequireJS to my project (which I prefer not to do). Do I have no choice but to forego using this module or compromise by adding Require, or is there a method to utilize it without Require?

javascript angularjs requirejs dragula

Answer 1

Answer №1

With the assistance of those who left comments (thank you all!), I was able to successfully make this work. There are a couple of key steps you need to take. First, I made the mistake of bundling this module with my other modules and attempting to call it. Unfortunately, that won't work as it requires initialization with a parameter (angular). Here's what you should do:

Include a reference to angular-dragula.js (or its minified version) in your index.html page below where you declare angular but above where you create your app.
When specifying the dependencies for your app, include angularDragula(angular) (without quotes).
Utilize dragula just like you normally would. If you need to access the service, you can use the name angularDragula.

As an example, here is how I declared my app:

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

To make a simple list draggable and droppable, here is the HTML code I used:

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

It's worth noting that I did not explicitly declare angularDragula anywhere, unlike in some examples. In those cases, the author required angular, created the angular variable, then required angular-dragula and created the angularDragula variable. This step isn't necessary if you're not using RequireJS, provided you load the scripts in the correct order.

Answer 2

With the assistance of those who left comments (thank you all!), I was able to successfully make this work. There are a couple of key steps you need to take. First, I made the mistake of bundling this module with my other modules and attempting to call it. Unfortunately, that won't work as it requires initialization with a parameter (angular). Here's what you should do:

Include a reference to angular-dragula.js (or its minified version) in your index.html page below where you declare angular but above where you create your app.
When specifying the dependencies for your app, include angularDragula(angular) (without quotes).
Utilize dragula just like you normally would. If you need to access the service, you can use the name angularDragula.

As an example, here is how I declared my app:

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

To make a simple list draggable and droppable, here is the HTML code I used:

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

It's worth noting that I did not explicitly declare angularDragula anywhere, unlike in some examples. In those cases, the author required angular, created the angular variable, then required angular-dragula and created the angularDragula variable. This step isn't necessary if you're not using RequireJS, provided you load the scripts in the correct order.

Leveraging Angular Dragula without the need for RequireJS

Answer №1

Similar questions

Is it optimal to have nested promises for an asynchronous file read operation within a for loop in Node.js?

Triggering animation with jQuery and CSS

Angular version 1.6 with ES6, no errors in the application

Tips for resolving the issue of cypress automatically opening a new tab

Optimizing workflow with express.js, backbone.js, and connect-assets for maximum efficiency

Activate modifications in a distinct column?

Obtain your access token from auth0

Node.js offers a simple and effective way to redirect users to another page after they have

Customize Column Headers in Handsontable: A Quick Guide

Is iterating through object with a hasOwnProperty validation necessary?

Stop Antd Modal from automatically scrolling to the top

Transmitting JSON information using post method through .ajax(), as well as receiving a JSON reply

Using JavaScript to assign function arguments based on arbitrary object values

Leverage the power of React in tandem with Express

angular primeng table has a checkbox to select all checkboxes

Whenever I select a link on a navigation bar, it transports me to the desired section of the page. However, I often find that the navbar ends up

Tips for validating a text input field depending on the selected value in a dropdown menu using AngularJS

The component data fails to reflect the updated value following a status change due to not properly retrieving the new result from the POST function

Understanding the process of verifying signatures with Cloud KMS

I am attempting to send an array as parameters in an httpservice request, but the parameters are being evaluated as an empty array