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.

javascriptangularjsdragula

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

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';
});

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

Why is the "&" symbol in my JSON showing as "&amp;" when displayed in an Angular view?

In my project, I am utilizing a json file to store key/strings for localization with angular-translate. One of the strings in this file is 'Profile & Preferences', which I am using in my view. However, when I use ng-bind-html to display this ...

javascriptangularjsjsonspecial-charactersangular-translate

When using the jQuery datepicker with the minDate set to 0, any past dates entered in the text box will be automatically reset to the current date

How can I prevent users from selecting past dates in a jQuery datepicker, while keeping any existing past dates displayed as is? My current code looks like this: $("#t1").datepicker({ minDate:0 }); And the text box code is, <input type="t1" va ...

javascriptjquerydatepicker

Which is better for scrolling in Angular 2+: using HostListener or window.pageYOffset?

Which syntax is best for maximizing performance in Angular 2+? Is it necessary to use HostListener, or is it simpler to obtain the scroll position using the onscroll window event and pageYOffset? @HostListener('window:scroll', ['$event&ap ...

javascriptangular

Attempting to have this .js lightbox appear as soon as the page loads

This Lightbox is absolutely stunning! However, I am looking for a way to automatically trigger the lightbox when the page loads. ...

javascriptjquerylightbox

Disable the toggling of the dropdown functionality in the bootstrap function

Recently, I made some modifications to a bootstrap navbar by transforming it into a toolbar and adjusting a dropup dropdown to include two datepicker elements. An issue arose when the dropdown would collapse upon selecting a date. To address this problem, ...

javascriptjquerytwitter-bootstrapdrop-down-menutoggleclass

Implement a select element with an onchange event that triggers an AJAX

As a newcomer to Javascript, I've been struggling to find a solution to my issue. The goal is to add an additional select option when the previous select option is changed. I attempted to implement the code below, but it's not functioning correct ...

javascriptphpjqueryajax

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

javascripthtmlvue.jsvue-tables-2

Sending C# Model from View to Javascript

I have set up my ViewModel for the View: public class DashboardViewModel { public List<UserTask> UserTasks {get; set;} public List<WorkItem> WorkItems {get; set;} } In the View, I am looping through the WorkItems as follows: ...

javascriptc#asp.net-mvcrazormodel

Customize button text in Vue using data variable conditions

There are 3 desks in a table with role IDs 2, 4, and 6. In this scenario, two tables are involved. The goal is to dynamically display a specific role name on a button based on the current user's role ID. The desired displays are: If the current use ...

javascriptvue.jsvuejs2vue-component

Leverage node rework CSS directly within your browser for seamless website

Looking to utilize the reworkcss/css library in the browser. Downloaded version 2.0.0 from GitHub and installed necessary packages with npm install. Attempted using requireJS, which supports processing the CommonJS Module Format by requiring index.js, bu ...

javascriptnode.jsnpmclient-sidebrowserify

Sorting tables in Jquery with advanced filter options and seamless integration with an ajax pager

I've implemented a tablesorter library for sorting and filtering data in a table along with a plugin that allows me to paginate the table across multiple pages. Due to the increasing number of records in my table causing slow loading times (>60 secon ...

javascriptjqueryjsonajaxtablesorter

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

Tips for passing a page as an argument in the function parameter of the page.evaluate() method?

I keep running into this issue when I pass the page as an argument: TypeError: Converting circular structure to JSON --> commencing at object with constructor 'BrowserContext' | property '_browser' -> object with const ...

javascripthtmlnode.jsdom-eventspuppeteer

Discord.js Lock Command Implementation

I've developed a lock command for discord.js, but every time I try to run the command, I encounter an error. Here's the code snippet: module.exports = { name: "lock", description: "Lock", async run(client, message ...

javascriptnode.jsdiscorddiscord.js

Swapping out data within a container

I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...

javascripthtmlcss

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

javascripthtmlcss

Guide to crafting a javascript variable from MySQL through the power of PHP and AJAX

I am not very experienced in working with AJAX and javascript. I am currently trying to pass longitude and latitude values from a MySQL database to javascript, but it doesn't seem to be working as expected. Can anyone help me figure out what I might b ...

javascriptphpajax

What is the best way to display changing session variables in PHP?

Purchase Page: This page allows customers to select business card orders in various foreign languages and customize their options. Whenever a user decides to add an extra card by clicking a button, javaScript dynamically includes new form fields. To ensur ...

phpjavascriptsessiondynamicecho

Interactive Timekeeping Tool with AngularJS Alarm Feature

I have successfully implemented the functionality to display the system time and date. Additionally, I have set up textboxes for users to input the time they want to set as their first alarm. My current goal is to trigger a particular action once the syst ...

javascriptangularjs

What is the best way to modify the state of an array of objects by applying a filter in Vue 3?

I am currently facing an issue with a component that is listening for an emit and then attempting to filter out a user with a specific userId from the users state. The challenge lies in the fact that assigning filteredUsers to users does not appear to be ...

javascriptvue.jsvuejs3