I am facing an issue with cdkDrag where a small preview of the item being dragged shows up. I want to disable this feature and remove any CSS classes related to the dragging state. Can anyone guide me on how to achieve this?
https://i.sstatic.net/nYU07.png
As you can see in the image, there is a preview of the item while dragging, which I wish to hide. I have tried looking into the CSS classes applied during dragging but couldn't find the one to disable. Can someone help me out?
If you want to personalize the dragging preview, use the cdkDragPreview directive explained in the Angular Materials Drag and Drop CdkDragPreview documentation.
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" cdkDrag>
{{movie.title}}
<img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
</div>
</div>
View an example on Stackblitz.
In your case, you can insert an element into the main element with cdkDrag.
For instance:
...
<tr *ngFor="let feed of todo;let index = index" cdkDrag (cdkDragStarted)="started($event)">
<span *cdkDragPreview>Test</span>
<td>
...
Take a look at your customized Stackblitz.
My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image: postman http request and header However, when I try to make the same request f ...
Check out this piece of HTML code I have: <div class="container"> <div class="column"> <div class="post-module"> <!-- Inserting content here --> </div> <div class="post ...
I am currently working with an angular 10 table that includes a selection feature, but I am encountering issues trying to display an expandable row when the user selects a particular row. I have attempted to incorporate expandable tables in conjunction wit ...
When using Angular 6 and the downloadFile method to download an Excel sheet from the WebAPI, everything runs smoothly. A dialog box opens up asking to save the file on the drive, but then it unexpectedly navigates me back to the home page. This redirects ...
In the world of Bootstrap 4 https://i.sstatic.net/bMSOK.png Comparing to Bootstrap 3 https://i.sstatic.net/RVITm.png Seeking to replicate Bootstrap 3's menu in Bootstrap 4? This code snippet showcasing Bootstrap 4's menu can be found at : & ...
The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...
Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...
I'm curious to know whether creating a simple form validation process can really be as complicated as it seems, or if I may be overlooking something. It's fairly straightforward to demonstrate the power of form validation in a tutorial setting. ...
I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...
I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...
When working with React & NextJS, I have observed that my modular SCSS files are automatically prefixing my classnames with the name of the file. Is there a way to turn off this feature as it is making the DOM structure difficult to interpret? For instanc ...
Currently, I have set up angular with nginx as a reverse proxy within a docker container. The issue I am facing is related to the routing of the angular application. While I can smoothly navigate through various pages using the navbar, reloading the page ...
Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...
Looking for a way to make a button with flexible width while allowing text to wrap to 2 lines for minimum button size? Check out the examples below: To keep the button width small, even short words should wrap to 2 lines: My Button If there's a ...
Having trouble with Javascript code inside typescript. $.fn.select2.amd.require([ 'select2/data/array', 'select2/utils' ], function (ArrayData, Utils) { /* tslint:disable */ function CustomData ($element, opti ...
I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...
Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after an ...
I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...
I am seeking relevant advice to address my specific need: In my Angular application, I have implemented a jwt-based authentication system. After obtaining a new token and refresh token, I have set up a setTimeout function to ensure the token is refreshed ...
Currently, I am in the process of compiling a list of products. To enhance the layout, I would like to assign a specific class to every other element. This class could be :before, :after, or simply .My-clas <div class="product-single"></div> ...