The issue arises when attempting to drop elements from two lists with incorrect positions and mismatched coordinates

Angular 9 had a working version of this, which you can find here:

https://stackblitz.com/edit/two-drop-list-problem-zp556d?file=package.json

Now in the new Angular 14 version:

https://stackblitz.com/edit/angular-ivy-1jvbnn?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.module.ts,src%2Fstyles.css,package.json

In the latest version, there is an issue where the dragged object jumps across the window when released. I've tried different solutions like removing sorting and disabling on drop, but haven't found the right fix yet.

You can see the original post on Stack Overflow here: Angular Drag and Drop absolute position elements selecting wrong index

https://i.sstatic.net/S6G7O.gif

angulartypescriptangular-materialdrag-and-dropdrag

Answer №1

Exclude the lines containing the assignment of event coordinates to this.bigList[0].left and this.bigList[0].top.

  dragEnded(event: CdkDragEnd) {
    console.log(`[ ::: dragEnded - X ]   ${event.dropPoint.x} ::: dragEnded - Y ]  ${event.dropPoint.y}   `)
  }

Start the rebuilding process of the coordinate map from this point onwards.

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

What is the best way to dynamically translate TypeScript components using transloco when the language is switched?

I am seeking clarification on how to utilize the TranslocoService in TypeScript. Imagine I have two lang JSON files for Spanish and Portuguese named es.json and pt.json. Now, suppose I have a component that displays different labels as shown in the followi ...

angulartypescripttransloco

The alignment of the 3D STL object is not adjusting properly when zooming in with Three.js

Below is the code snippet used to render a 3D object on the screen: this.col=new Color().set(this.colorname); this.renderer = new WebGLRenderer({alpha:true,canvas:this.myCanvas.nativeElement}); this.renderer.setSize(window.innerWidth/2,window.inne ...

angularthree.js3d

Using Angular Platform-server (Universal) to route with query parameters

I've been struggling to describe a route with get parameters in my platform-server/universal application, but haven't had any luck so far. Does anyone have suggestions on how to achieve this? Based on my understanding of express routing, I atte ...

angularexpressangular-universalplatform-server

Setting the height of a rich HTML editor component can be achieved in a few simple

Seeking guidance regarding adjusting the height of the editing area while using Quill, the rich html editor in my angular component. I am currently utilizing angular-7, bootstrap, and font-awesome, all at their latest versions. Despite thorough research, ...

angularquill

Can a TypeScript generator function be accurately typed with additional functionality?

Generator functions come with prototype properties that allow for the addition of behavior. The generated generators inherit this behavior. Unfortunately, TypeScript does not seem to recognize this feature, leaving me unsure of how to make it aware. For i ...

typescript

The template is displaying the string as "[object Object]"

I've implemented code in my ngOnInit function to fetch the translation for a specific text. The following function is being called: async getEmailTranslation() { const email$ = this.translate.get('SUPPORT_TRANSLATE.EMAIL'); this.emai ...

angulartypescript

Discovering ways to fetch an array of objects using object and arrays in JavaScript

When comparing an array of objects with a single object and listing the arrays in JavaScript, specific conditions need to be met to retrieve the array of objects: If the itemvalue and idvalue are the same, check if the arrobj cid has the same codevalue ...

javascriptarraystypescriptobjectecmascript-6

Unable to incorporate angular2-datatable into VS2015 project using npm as a package manager

I'm currently working on developing a web application using Angular 2 and ASP.NET 5. In order to create a table, I decided to install the angular2-datatable package using npm. I added the dependency below to my package.json file: "angular2-datatable" ...

angularnpm

Merging two arrays of objects from the same response in JavaScript

How can I efficiently merge two arrays of objects from the same response? let data = [{ "testLevel":"mid", "testId":"m-001", "majorCourse": [ { "courseName":"C++" ...

javascriptangulartypescript

Get rid of any vacant spaces in -translate-y by utilizing Tailwind CSS

I am experiencing an issue with some empty space in my profile container that I would like to have removed. The profile container is where the problem lies. <div className='h-auto w-[650px] z-10 rounded-xl' style={{ backdropFilter: `blur(4 ...

typescriptnext.jstailwind-csstsx

Steps for assigning a value from an enumerated type

I searched extensively online and came across resources like this: https://www.typescriptlang.org/docs/handbook/enums.html, but none provided an answer to my specific inquiry. Within the enum generated by typescript-generator, I have the following: type ...

angulartypescriptenums

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Appending an item to an array in TypeScript

I'm feeling lost. I'm attempting to insert new objects into an array in TypeScript, but I encountered an error. My interface includes a function, and I'm puzzled. Can anyone offer guidance? interface Videos{ title: string; descriptio ...

arraystypescriptobject

The sum is being treated as a concatenation instead of an addition in this case

Why is the somma value showing the concatenation of totaleEnergetico and totaleStrutturale instead of a sum? RiepilogoCombinatoStComponent.ts export class RiepilogoCombinatoStComponent implements OnInit { constructor() { } interventi: AssociazioneI ...

javascriptarraysangulartypescriptsum

Utilizing an external TypeScript class without the need for importing it

Let's consider a scenario where we have a class named Constant. The requirement is to make this class accessible globally without the need for importing, is there a way to achieve this? In the constant.ts file: class Constant { public stati ...

typescript

Enhance your coding experience with TypeScript's autocomplete in Visual Studio Code

After migrating a project from JavaScript to TypeScript, I am not seeing autocomplete suggestions or type hints when hovering over variables in Visual Studio Code editor (Version 1.7.2). Even the basic example provided below does not display any auto-com ...

typescriptvisual-studio-codetypescript-typings

Issue with Angular DevExtreme error popup

Currently, I am working on a project using Angular and DevExtreme. Whenever an error occurs, the error message seems to be hidden behind the popup form. Can anyone advise me on how to bring it to the front? Any help would be greatly appreciated. https://i ...

angulartypescriptdevextremeabp-framework

Encountering an issue with the constructor function type for @types/tapable/index

Everything was running smoothly on my production website until I decided to run the "npm install" command on the server, followed by the "npm run build:prod" command. Unfortunately, I encountered the following error: ERROR in [at-loader] node_modules/@typ ...

angularnpm

The data retrieved from the web API is not undergoing the necessary conversion process

I am facing an issue with a web API call where the property checkNumber is defined as a double on the API side, but I need it to be treated as a string in my TypeScript model. Despite having the property defined as a string in my model, it is being receive ...

javascripttypescriptasp.net-web-api

Creating an instance of a class using a class decorator, with or without the 'new'

Seeking alternatives to creating class instances without using the new keyword in TypeScript, I came across this excellent solution that works seamlessly in JavaScript. The code found in the repository mentioned https://github.com/digital-flowers/classy- ...

typescriptconstructordecorator