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

The $digest function has reached its maximum of 10 iterations. Operation aborted

What is the procedure for turning off hover color on an href element?

The jQuery AJAX function successfully executes, but the MySQL post deletion operation fails to take place

Binding text inputs in Laravel Vue.js does not work

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Tips for choosing Week Range values with Selenium WebDriver

Converting non-null values in a JSON object to null within an MVC Controller method

VueJS Component has trouble refreshing the DOM content following an AJAX Promise

Issue with Jade not displaying external JSON data

substitute bullet point list item with new element

Exploring an alternative perspective on successful login in angular.js

The MeshBasicMaterial in THREE.js successfully renders, while the MeshLambertMaterial does not produce the desired outcome

Having difficulty with the useState hook in a material ui functional component that integrates with Firebase

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

Foundation Unveil Modal hidden from view

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

How can I upload a folder with subfolders and keep the structure intact?

What's the reason why Angular stops flickering with the use of "/" in href?

JavaScript HTML content manipulation

Attempting to add an element to an array results in an endless cycle