I need some reference for angular drag and drop, I went through the angular documentation but it's not working, I need to develop a page where I can drag tools to my canvas in angular. If anyone knows this please help.
Asked
Active
Viewed 1,976 times
2 Answers
2
you need to add @angular/cdk
and it is supporting packages .
Then include a module called DragDropModule
in app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ,DragDropModule],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
in app.component.css
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; background-color: red } /* To remove the scrollbars */
lastly in app.component.html
<canvas #ele id="canvas" ></canvas>
<div draggable="true" (dragend)="create()">
Drag
</div>
in app.component.ts
import { Component, VERSION,ViewChild,ViewContainerRef,ComponentFactoryResolver } from '@angular/core';
import { DraggableComponent } from './components/dragg.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
componentRef: any;
count=0;
@ViewChild('ele', { read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver){
}
create(){
const factory = this.resolver.resolveComponentFactory(DraggableComponent);
this.componentRef = this.entry.createComponent(factory);
this.count++;
this.componentRef.instance.text = "Draggble" +this.count;
}
}

AhammadaliPK
- 3,448
- 4
- 21
- 39
-
thanks ffor the information, but i need the replica to be dragged, its like when we deisgn a logo we can drag and drop the tools, actually we are moving the replica right? – Ananthakrishna Jun 29 '20 at 11:09
-
you can add `cdkDrag` to any element to make it draggable – AhammadaliPK Jun 30 '20 at 00:20
-
please use this link for further info , https://medium.com/angular-in-depth/exploring-drag-and-drop-with-the-angular-material-cdk-2e0237857290 – AhammadaliPK Jun 30 '20 at 01:02
-
I have seen that, but instead of moving the entireI need to only move the replica. i.e, like dragging clip arts in the paint. can you helo me with it.– Ananthakrishna Jun 30 '20 at 10:16
-
can you join in this [chat](https://chat.stackoverflow.com/rooms/216969/angular-drag-and-drop) – Ananthakrishna Jun 30 '20 at 17:18
-
sorry for the delay can you join the room? – Ananthakrishna Jul 03 '20 at 12:14
1
You can get a reference from here drag-drop. I generally use this tool for drag and drop. Make sure you will get a solution.
After that, if you get any error then write it down over here.

Bhavik Prajapati
- 31
- 6
-
I did the same firstly but it won't work. [this](https://stackblitz.com/angular/brlbpydmpvjn?file=src%2Fmain.ts) is the example I have referred to but the thing won't drag around. – Ananthakrishna Jun 29 '20 at 11:21
-
-
i want it dragged exactly inside the box, but it won't get moved. – Ananthakrishna Jun 29 '20 at 12:17