Updating model values while dragging with Angular Dragular

Question

Updating model values while dragging with Angular Dragular

Currently, I am experimenting with dragula and its newer version, dragular, on some sample projects.

One specific dilemma I am facing involves the implementation of drag and drop functionality in an Angular project. My query pertains to utilizing a list of objects as my model, which is set within a div using ng-repeat. Essentially, when dragging an item to another div, I am wondering if it is possible to alter or update a property of the object being dragged?

I have attempted various methods to access the model of the moving object but have not been successful. Hopefully, someone has encountered this issue before and found a solution.

javascript angularjs dragula

Answer 1

Answer №1

If you're using dragular, you have the ability to interact with the mirror DOM element through the service 'dragularService.shared.mirror' and customize it as needed.

UPDATE: Additionally, if you need to make changes to the object being dragged, you can access it through the service: 'dragularService.shared.sourceModel'

Answer 2

If you're using dragular, you have the ability to interact with the mirror DOM element through the service 'dragularService.shared.mirror' and customize it as needed.

UPDATE: Additionally, if you need to make changes to the object being dragged, you can access it through the service: 'dragularService.shared.sourceModel'

Answer 3

Answer №2

Dealing with a similar issue, I managed to resolve it by assigning the model objects' id to the HTML elements and then accessing them using this id.

Here is a snippet of the HTML code:

<div id="{{ customer.id }}" ng-repeat="customer in customers">{{customer.name}}</div>

Within the controller, I retrieve the item based on its id:

$scope.$on('cart.drop', function (event, element, target, source) {
    //getById() is a custom function that you need to define
    var droppedCustomer = customers.getById(element.attr('id'));

    //Update the model object
    droppedCustomer.name = 'My updated name';
});

Answer 4

Dealing with a similar issue, I managed to resolve it by assigning the model objects' id to the HTML elements and then accessing them using this id.

Here is a snippet of the HTML code:

<div id="{{ customer.id }}" ng-repeat="customer in customers">{{customer.name}}</div>

Within the controller, I retrieve the item based on its id:

$scope.$on('cart.drop', function (event, element, target, source) {
    //getById() is a custom function that you need to define
    var droppedCustomer = customers.getById(element.attr('id'));

    //Update the model object
    droppedCustomer.name = 'My updated name';
});

Updating model values while dragging with Angular Dragular

Answer №1

Answer №2

Similar questions

Run a function upon clicking a button in JavaScript

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?

The character replacement function does not seem to be functioning properly in DialogFlow following the use of

Steps for submitting a form through an ajax callback

How can I resolve the issue of not returning anything ondrop in my code?

Having the `overflow:auto` property conceals additional content

using props as arguments for graphql mutation in react applications

I am having trouble understanding why my GraphQL query is not retrieving any data from the WordPress GraphQL API when using SWR

javascript display error message in innerHTML if passwords do not match

Utilizing JQuery for parsing information

Tips for implementing Vue in production mode with vue.esm-bundler.js

Navigating through objects to retrieve internal object values

Issue with PassportJS and Express 4 failing to properly store cookies/session data

Enhancing jQuery Functionality with Parameter Overrides

The user's input is not being accurately represented when making an AJAX request to the

What is the best way to style output in jQuery for a specific div?

Validate form for radio group

Reversing the Jquery checkbox functionality

The element is not functioning properly with Angular's ng-repeat

Seamlessly Loading Comments onto the Page without Any Need for Refresh