Detecting drag events between connected angular ui-trees is a complex yet achievable task

How can I trigger an action when an item is dragged from tree#1 to tree#2 and dropped? I want to make a specific HTTP call to save the transferred item. I have successfully implemented actions within one tree using the 'dropped' event, but struggling when it comes to moving items between trees. I've attempted to differentiate between the 'dest' and 'source' objects in the event, but haven't been able to find a solution yet.

Answer №1

After some tinkering, I managed to find a solution to my issue. By introducing a custom data-tree-type attribute to the tree structure,

 <div ui-tree="treeOptions" id="tree-root" data-tree-type="mainTree" data-drag-delay="200">
        <ol ui-tree-nodes ng-model="data">
            <li ng-repeat="node in data" data-info="{{node.pageId}}" ui-tree-node ng-include="'nodes_renderer.html'"></li>
        </ol>
</div>

I then made modifications to the angular-ui-tree.js file within the uiTree directive by implementing a watch function

scope.$watch(attrs.treeType, function (val) {
     scope.treeType = attrs.treeType;
});

This adjustment now allows me to compare the treeType attributes between dropped event destination and source objects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Injecting dynamic data into a function parameter with Angular 1 Interpolation

In my code, I have a feature that alters the text displayed on a button depending on certain conditions. $scope.text = 'Wait'; if(Number($scope.x) == Number($scope.y)) $scope.text = 'Go' else if(Number($scope.x) < Number($scope ...

Locate the parent and child elements within an array

Within the array provided below, there are parent items as well as children. I am currently able to identify parents (depth 0) and their immediate children (depth 1), however I am unsure how to handle deeper nested levels. For reference, you can view the ...

What is the best way to access a specific attribute of an object that is within an array in JavaScript or Google Apps Script?

One challenge I'm facing is with a javascript function that generates an array filled with objects. Each object contains various attributes such as id, colour, and size. After the array is created, it is sent to a Google Apps Script for further proces ...

Issues with retrieving information between AJAX and PHP (and vice versa)

I have a script that sends the value of a text input from an HTML form to emailform.php. This PHP file then adds the data to a .txt file. The issue I'm facing is setting the value of $email in the PHP file to match that of the HTML input field. Curren ...

The Server Components render encountered a glitch

Screenshot of the errorI am encountering a strange error only in the production environment. The lack of additional information leads me to believe it may be due to security measures put in place for production. Unfortunately, I have been unable to repli ...

Can we stub these types of functions in any manner?

One file named helperFunction.js contains the following code: module.exports = (arg1, arg2) => { \\function body } To use this function in another file named file.js, you can simply call it like this: let helperFunction = require(' ...

Ensure your mobile device is age 13 or over before proceeding

I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below. import useTranslation from "next-translate/useTranslation"; import isM ...

Is there a distinction between the node commands 'cordova ionic' and 'ionic'? Which command should be utilized?

When it comes to node commands, is there a distinction between running npm install -g cordova ionic versus just npm install -g ionic? Which of these commands should be used for building an Ionic project? It seems that the documentation provided by Ionic F ...

Engaging grid connected to MySQLi database table

I am new to programming and have been diving into the world of PHP and MySQLi. I understand that the task at hand requires more expertise than what I currently possess. My project involves creating a 3x3 grid where only one square per row can be selected. ...

Command to conceal components for users visiting as guests

I'm looking to develop a directive that hides specific elements for guest users. Here is the current code I have: angular.module('someMod') .directive('premiumUser', premiumUser) .controller('PremiumUserCtrl', Pr ...

Detect if the user is using Internet Explorer and redirect them to a different

My web application is having trouble rendering in Internet Explorer. In the meantime, I would like to detect if the user is using IE and redirect them to a different page specifically for IE visitors. What is the best way to accomplish this? Should I use ...

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

How To Access a View by Clicking in Ionic Framework

I have designed the main screen shown below. When each link is clicked, it should open the corresponding view. https://i.sstatic.net/H84jt.png Here is what I have created so far: Main Screen <body ng-app="starter"> <ion-pane> < ...

Issue encountered when validating password through submission rate limiting

On my login page, I perform validation on the Email and Password entered by the user using submission throttling from the database. However, I encountered an error stating 'undefined index: txtMail' on the validate page. To track the server-side ...

Why might the MIME type 'application/json' be refused when the dataType is JSON?

Is it true that if the dataType is set to JSON in jQuery, it expects a JSON response? I found http://api.jquery.com/jquery.ajax/ to be informative on this topic. In the following function, I have experimented with specifying both no dataType (for jQuery&a ...

When making a Post Request, the Req.body is found to be empty

Here is the code snippet from various files: In App.js file: app.use(express.json({limit:"30mb",extended:true})); app.use(express.urlencoded({extended:true})); In route.js file: router.route("/register").post(registerUser) Importin ...

"Exploring the world of interactive external links within a Facebook canvas app

Within my Facebook canvas application, I have links that need to open in a new tab or page when clicked by users. How can I achieve this? To redirect users to the Facebook login page, I am currently using JavaScript location. A few months ago, I came acr ...

JavaScript code to remove everything in a string after the last occurrence of a certain

I have been working on a JavaScript function to cut strings into 140 characters, ensuring that words are not broken in the process. Now, I also want the text to make more sense by checking for certain characters (like ., ,, :, ;) and if the string is bet ...

The fixed element alters its color when applied to a specific class within a div

I have a button with an icon and text that remains fixed on my webpage. The background colors of the sections change as you scroll through them, alternating between dark and light. I am looking for a solution where I can apply a class to multiple section ...

What role does conditional logic play in the compile or link function of an AngularJS directive?

In my $scope, there is a JSON object named data. Within this object, there exists a member called items that can be either an Object or an Array of Objects. Due to this variability, the use of ng-repeat is not feasible: <ul> <li ng-repeat="it ...