Angular 拖放

Question

我需要一些关于 angular 拖放的参考，我浏览了 angular 文档，但它不起作用，我需要开发一个页面，我可以将工具拖到我的 [=16] =] 在 angular 中。如果有人知道这个请帮助。

Answer 1

您可以从此处获取参考 drag-drop。我一般用这个工具来拖放。确保您会得到解决方案。

之后，如果您遇到任何错误，请将其记录在此处。

Answer 2

您需要添加 @angular/cdk 并且它是支持包。

working demo

然后在app.module

中包含一个名为DragDropModule的模块

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 { }

在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 */

最后在 app.component.html

<canvas #ele id="canvas" ></canvas>
  <div draggable="true" (dragend)="create()">
  Drag 
</div>

在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;
  }
}

Angular 拖放

Angular drag-drop

drag-and-drop

angular-material

angular-dragdrop

angular