I have an example on stackblitz where I am using @angular/cdk/drag-drop in my project. I am attempting to change the cursor to cursor:grabb and cursor:grabbing when the cursor is over an element and when I drag a picked element.
Here is the CSS line I am trying to use:
.example-box:active {
cursor:grabbing
}
Unfortunately, it is not working as expected. Can anyone help me figure out what I need to do?
It's been a while, but I finally cracked the code and found a solution to the problem!
Start by incorporating this global CSS snippet:
body.inheritCursors * {
cursor: inherit !important;
}
For your cdkDrag element, include cdkDragStarted and link it to a function in your .ts file:
<div cdkDrag (cdkDragStarted)="dragStart($event)"></div>
In your .ts file, you can then toggle the cursor behavior when a drag begins and ends:
bodyElement: HTMLElement = document.body;
dragStart(event: CdkDragStart) {
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'move';
//replace 'move' with your desired cursor type
}
drop(event: CdkDragDrop<string[]>) {
this.bodyElement.classList.remove('inheritCursors');
this.bodyElement.style.cursor = 'unset';
...
...
}
Check out this live example on StackBlitz for reference.
I hope this information proves useful! 👨💻
When an element is being dragged, CDK includes the class cdk-drop-list-dragging on the parent element that contains the cdkDropList directive. To prevent the element from moving outside of its container, you can apply the following CSS rule:
.cdk-drop-list-dragging {
cursor: move;
}
I'm facing a challenge with my responsive image setup. The image is filling the top half of the screen as intended, but I can't seem to get the content underneath it to stay below the image as it resizes. Instead, the content ends up overlapping ...
I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...
I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...
Using the Ionic Contacts Native feature, I am able to retrieve a list of contacts from my phone. .ts: import { Contacts } from 'ionic-native'; ///////// export class ContactPage { contactsfound = [] constructor(public navCtrl: NavCont ...
Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...
I've been attempting to link an Observable to a template variable in Angular using the following code: [class.active]="isBookmarked$ | async" During the ngOnInit function, I initialize the Observable: var promise = this.cacheService.getItem(this.bo ...
I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...
While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...
Image 1: Configuring express.static for the public folder Image 2: Adding href="/app.css" in post.ejs file Image 3: Final result While experimenting with using /app.css and app.css in the post.ejs file, I noticed that the outcome was consistent with th ...
I'm interested in incorporating an image into a jumbotron and adjusting its width correctly, similar to what was discussed in this question: Bootstrap image to jumbotron width However, I am unsure of where to place my custom CSS code to achieve the d ...
Need help with Angular PrimeNG megamenu visibility issue. <p-megaMenu [model]="menuItems"></p-megaMenu> this.menuItems = [ { label: 'Home', items: null, routerLink: [''] }, ...
File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...
Trying to absolutely position elements within tbody, tr, and td may not work in certain browsers. While it behaves as expected in Firefox, it does not work properly in IE, Edge, and Chrome. If you apply position: relative to tbody, tr, or td, it will be i ...
I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...
When attempting to inject the default dependency required to run the spec file without errors, I encountered a Type Error: Cannot read property "contractno" of undefined. /** This is the userModel Class **/ export class UserModel { contractNo: string; ...
Encountered a JSON decode error from the Laravel API when attempting to submit form data. Unable to access the Laravel API side, but the submission is successful when done via Swagger. curl -X 'POST' \ 'https://example.com/create-refe ...
I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...
Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...
I am currently working on a website where I have two images that are displaying vertically. However, I would like these images to be displayed horizontally with animation. I attempted to use Bootstrap to achieve this horizontal layout, but when I include ...
@Injectable() export class Service1 { constructor( private s2 : Service2 ) { console.log( s2.name ); } } @Injectable() export class Service2 { public name: string = 'Hi'; } //------------Testing with Mocks------------- l ...