What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles:

  1. Automatically moving to the positive x-level whenever an Obsarbalve emits a new value.
  2. Moving manually to both positive and negative x-levels by dragging and dropping it.

The manual drag and drop functionality is achieved using Angular's drag and drop CDK. However, an issue arises when the drag action is released (cdkDragReleased)

A specific function is triggered upon releasing the drag:

onDragEnd(e: CdkDragRelease){
    let newPosition =  e.source.element.nativeElement.getClientRects().item(0).left;

    this.facade.setBehaviorSubject(newPosition);
  }

setBehaviorSubject updates the Observable's next value, subsequently updating the element based on the first role mentioned earlier.

The end goal is to have a combined position x value (resulting from the dragged value + observable value).

I am seeking a way to retrieve the exact value where the user releases the element. How can I prevent this behavior?

javascripthtmlcssangulardrag-and-drop

Answer №1

Finally, the answer has been discovered!

When using Angular drag and drop CDK, a transform property with values of translate3d(x,y,z) is applied to move elements. To reset this property after dragging an element, I needed to include the following code in the method handling CdkDragEnd:

  onDragEnd(e: CdkDragEnd) {
    e.source._dragRef.reset();
  }

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

Unable to retrieve the .attr() from a button that was created using handlebars

I am currently working on developing a web scraper as part of a homework task that involves using Express, Mongoose, Cheerio/axios, and Handlebars. In my "/" route, I retrieve the Mongoose objects and use Handlebars to display them on the page in individua ...

javascriptexpressmongoosehandlebars.jsexpress-handlebars

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

JavaScript - Utilizing appendChild as soon as an element becomes available

I'm encountering an issue with my Chrome Extension where I am unable to detect some of the elements that I need to select within a page. var innerChat = document.querySelector('.chat-list'); My goal is to appendChild to this element, but t ...

javascriptgoogle-chrome-extension

Having trouble with an echoing PHP code error?

When I try to display my PHP code on the website, it is not showing up properly and instead displaying random numbers. I am attempting to add a feature to my website where the text updates every week from a stored file called quotes.txt. Can anyone advise ...

phphtml

Looking for a versatile jQuery plugin that enables right-click functionality across different browsers?

I am currently using a context menu plugin that displays a context menu when an element is right-clicked. However, this does not work on elements embedded with ajax. To solve this issue, I am considering utilizing ajax live to trigger the context menu func ...

javascriptjqueryajax

What is the reason for Vue.js failing to refresh the DOM when utilizing the datepicker feature with Moment.js

Currently, I am working on a basic datepicker control in vue.js, utilizing moment.js for managing the date formatting and manipulation. The issue that I'm encountering is that despite modifying the date instance within the component upon clicking eit ...

javascriptvue.js

Steps for generating a time selection dropdown menu

My issue is with the functionality of my timepicker dropdown. Below is the code I am currently using: $(document).ready(function() { $('.timepicker-input').timepicker({ timeFormat: 'h:mm p', interval: 60, minTime: ' ...

javascriptjquerytimepicker

The FuelUx scheduler forgets which day we've chosen when selecting weekly recurrence

When using the fuelUX scheduler, I noticed that after calling the method $('#myscheduler').scheduler("value","JSON VALUE") and selecting a weekly recurrence pattern, the information of the day gets lost. For example, if my input for the recurrenc ...

javascriptjsonschedulerfuelux

Get rid of the horizontal scroll bar and expand the width of the table

Normally, Tabulator limits the maximum width of the table and adds a horizontal scroll bar at the bottom. Is there a way to eliminate this scroll bar and make Tabulator expand the width of the table instead (resulting in the horizontal scrollbar appearin ...

javascriptnode.jsnpmtabulator

Verifying the presence of a value within an SQL table

I am currently working on developing a bot that requires me to save the commandname and commandreply in a database. Right now, I am using mySQL Workbench for this task. My goal is to verify if the commandname provided by the user already exists in the tab ...

javascriptmysqlsqlnode.js

What is the process for incorporating items from Slick Grid into a Multi Select TextBox?

Exploring the world of Slick Grid for the first time. Here is where I define my variables in JavaScript. var grid; var printPlugin; var dataView; var data = []; var selectdItems = []; var columns = [ { id: "Id", name: "Id", field: "Id", sortable: t ...

javascriptjqueryajaxslickgrid

Maintaining consistent row height in bootstrap when displaying or hiding a button

I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row&ap ...

htmlcssangularjstwitter-bootstrap

Jekyll adjusting the starting line of code snippet formatting

Currently, I'm in the process of setting up code highlighting for my blog using Jekyll and Pygments. However, I'm facing an issue where the first line of every code snippet seems to be slightly offset. To create a gutter effect, I'm utilizin ...

htmlcssjekyllpygments

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

I have a funky looking table on my webpage, here's an example: <body> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Product name</th> <th>Product ...

javascript

The jQuery autocomplete feature presents all choices regardless of what is typed into the input field

I'm currently working on a jQuery script that retrieves a JSON response and creates individual "player" objects based on the data received. These player objects are then added to the availablePlayers array, which serves as the data source for the aut ...

javascriptjqueryjsonautocomplete

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

My goal is to make 2 HTTP requests where the first call creates a record and then based on its result, I want to decide whether or not to execute the second call that updates another data. However, despite being able to handle errors in the catchError bl ...

javascriptangulartypescriptrxjsswitchmap

Sleek carousel design with optimal spacing between images

Solving the Issue Utilizing Ken Wheeler's Slick plugin has allowed me to create a carousel on my website. However, I've encountered an issue where the images inside the <a> tag aren't evenly spaced and are even overlapping in some ins ...

javascriptjquerycss

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

jquerycssanimationcss-animations

Creating a replica of a Parse Server object

I've been struggling to clone Parse objects without affecting the original ones. Despite trying various methods like Parse.Object.clone() and converting to JSON, I haven't found a working solution. I came across some recommendations online but no ...

javascriptparse-platformparse-server